1. 創建canvas畫布
- 通過標簽創建
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
2.繪制矩形
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據canvas對象創建context
var context=mycanvas.getContext("2d");
//設置繪畫樣式
context.fillStyle="#FF0000";
//旋轉
//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");
//根據canvas對象創建context
var context=mycanvas.getContext("2d");
//設置繪畫樣式
context.beginPath();
//參數圓心x、y軸坐標，半徑，0，角度
context.arc(20,20,20,0,Math.PI);
context.fillStyle="#FF0000";
context.closePath();
context.fill();
</script>
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據canvas對象創建context
var context=mycanvas.getContext("2d");
//設置繪畫樣式
for(let i=0;i<10;i++){
context.beginPath();
//參數圓心x、y軸坐標，半徑，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) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
<script>
//首先拿到canvas對象
var mycanvas=document.getElementById("myCanvas");
//根據canvas對象創建context
var context=mycanvas.getContext("2d");
//設置繪畫樣式
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();
</script>
5.繪制漸變
createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
圖片.png
6.給圖形繪制陰影
7.繪制圖片
