1. 創(chuàng)建canvas畫布
- 通過標(biāo)簽創(chuàng)建
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽昏名。
</canvas>
2.繪制矩形
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據(jù)canvas對象創(chuàng)建context
var context=mycanvas.getContext("2d");
//設(shè)置繪畫樣式
context.fillStyle="#FF0000";
//旋轉(zhuǎn)
//context.rotate(45);
//平移x軸20px倡怎，y軸20px
//context.translate(20,20);
//放大縮小灸芳，x軸放大2倍奄薇，y軸0.5倍
context.scale(2,0.5);
//畫矩形枝缔，起點0计雌，0仗阅，x軸150px尝偎，y軸75px
context.fillRect(0,0,150,75);
</script>
3.繪制圓
arc(x,y,r,start,stop)
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據(jù)canvas對象創(chuàng)建context
var context=mycanvas.getContext("2d");
//設(shè)置繪畫樣式
context.beginPath();
//參數(shù)圓心x便斥、y軸坐標(biāo)至壤，半徑，0枢纠，角度
context.arc(20,20,20,0,Math.PI);
context.fillStyle="#FF0000";
context.closePath();
context.fill();
</script>
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據(jù)canvas對象創(chuàng)建context
var context=mycanvas.getContext("2d");
//設(shè)置繪畫樣式
for(let i=0;i<10;i++){
context.beginPath();
//參數(shù)圓心x像街、y軸坐標(biāo)，半徑晋渺，0镰绎，角度
context.arc(i*20,i*20,i*10,0,Math.PI*2);
context.fillStyle="rgba(255,0,0,0.25)";
context.closePath();
context.fill();
}
</script>
4.繪制路徑
moveTo(x,y) 定義線條開始坐標(biāo)
lineTo(x,y) 定義線條結(jié)束坐標(biāo)
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據(jù)canvas對象創(chuàng)建context
var context=mycanvas.getContext("2d");
//設(shè)置繪畫樣式
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();
</script>
5.繪制漸變
createLinearGradient(x,y,x1,y1) - 創(chuàng)建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變
圖片.png
6.給圖形繪制陰影
7.繪制圖片
