<canvas id="canvas" width="500" height="500">
您的瀏覽器不支持canvas，請升級至最新版
</canvas>
// 建議使用自帶的width和height屬性設置寬高
獲取畫筆
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
1開始繪制
ctx.beginPath();
// 2繪制起點
ctx.moveTo(250,250);
// 3繪制后續點
ctx.lineTo(500,0);
ctx.lineTo(123,123);
// 4結束繪制
//closePath()也叫關閉路徑，會把終點和起點連接起來，進行繪制
// 只有當需要終點和起點連接，才使用closePath()
ctx.closePath()
描繪畫線
// 5畫(填)
ctx.strokeStyle='cyan';
// 設置線的寬度
ctx.lineWidth=5;
ctx.stroke();
填充
ctx.fillStyle="red";
ctx.fill();
繪制的線和填充的內容會發生覆蓋的情況，沒有優先級，由代碼順序決定，后面設置的會覆蓋前面設置的
繪制矩形
ctx.strokeRect(100,50,100,100);
前兩個值表示起點的開始坐標，后兩個是寬高
繪制文字
ctx.font='50px 黑體';
ctx.strokeText('hello,world',100,100);
字體
ctx.font='50px 黑體';
ctx.fillText('hello,world',100,300)
image.png
繪制圓形
//參數1：圓點的X;
//參數2：圓點的Y;
//參數3：圓點的半徑;
// 參數4：起點位置，根據右側和設置的弧度制找到起點
// 參數5：終點位置，根據右側和設置的弧度制找到終點
// 參數6：繪制方向，true代表逆時針，false代表順時針
ctx.arc(300,300,50,0,Math.PI*2,false);
ctx.stroke();
空心圓
例：
function randomColor(max,min){
return parseInt(Math.random()*(max-min)+min);
}
function random(){
let r=randomColor(255,0);
let g=randomColor(255,0);
let b=randomColor(255,0);
let a=Math.random()+0.3;
return 'rgba('+r+', '+g+', '+b+', '+a+')'
}
for(let i=0;i<200;i+=20){
ctx.beginPath();
ctx.arc(250,250,250-i,0,Math.PI*2,false);
// ctx.fillStyle=random();
// ctx.fill();
ctx.strokeStyle=random();
ctx.stroke();
}
年輪
繪制曲線
// 使用moveTo()放置起點
// 使用quadraticCurveTo()放置基準點和終點
// 參數1：基準點的X;
// 參數2：基準點的Y;
// 參數3：終點的X;
// 參數4：終點的Y;
ctx.moveTo(0,0);
ctx.quadraticCurveTo(250,500,500,0);
ctx.stroke();
image.png
// 三次貝塞爾曲線就是有兩個基準點
// ctx.moveTo(0,0);
// 參數1:基準點1的x;
// 參數2:基準點1的y;
// 參數3:基準點2的x;
// 參數4:基準點2的y;
// 參數5:終點的x;
// 參數6:終點的y;
ctx.bezierCurveTo(500,0,0,500,500,500);
ctx.stroke();
三次
渲染圖片
如果想把圖像畫到canvas中，需要先創建Image對象
var img=new Image();
img.src='1.jpg';
img.onload=function(){
// 必須等圖片加載完成之后才可以繪制
ctx.drawImage(img,0,0,300,300);
ctx.drawImage(img,0,0,100,100,100,100,300,300);
// ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// img 規定要使用的圖像、畫布或視頻。
// sx 可選。開始剪切的 x 坐標位置。
// sy 可選。開始剪切的 y 坐標位置。
// swidth 可選。被剪切圖像的寬度。
// sheight 可選。被剪切圖像的高度。
// x 在畫布上放置圖像的 x 坐標位置。
// y 在畫布上放置圖像的 y 坐標位置。
// width 可選。要使用的圖像的寬度。（伸展或縮小圖像）
// height 可選。要使用的圖像的高度。（伸展或縮小圖像）
}
清除畫布
// 清除畫布
// ctx.clearRect(250,250,200,200);
// 四個參數想，x,y,w,h
// 用戶清除畫布中已有內容
形變
位移
ctx.fillRect(100,100,100,100);
ctx.translate(100,100);
ctx.fillStyle='red';
ctx.fillRect(100,100,100,100);
ctx.translate(-100,-100);
ctx.fillStyle='blue';
ctx.fillRect(100,100,100,100);
在原有基礎上進行位移
縮放
// ctx.fillStyle='blue';
ctx.fillRect(100,100,100,100);
ctx.scale(0.5,0.5);
ctx.fillRect(100,100,300,100);
旋轉
ctx.scale(0.5,0.5);
ctx.fillRect(100,100,300,100);
ctx.translate(200,100);
ctx.rotate(Math.PI/2);
ctx.fillStyle='red';
ctx.fillRect(0,0,300,100);
- 時鐘刻度
ctx.translate(250,250);
for (var i = 0; i < 12; i++) {
ctx.rotate(Math.PI/6);
ctx.beginPath();
ctx.moveTo(0,-200);
ctx.lineTo(0,-160);
ctx.lineCap='round';
// ctx.closePath();
ctx.lineWidth=8;
ctx.stroke();
}
刻度
因為表盤是一個圓形，圍繞中心，所以把圓點中心位移到canvas中心，使用負Y值繪制，每30deg一個刻度，繪制12次。
// 設置線的尾部進行圓角處理,只針對線的兩端
ctx.lineCap='round';
// 給線與線交匯的位置設置圓角
ctx.lineJoin='round';
設置字體
ctx.font='50px 黑體';
設置字體水平對齊方式
ctx.textAlign='left';
設置字體垂直對齊方式
ctx.textBaseline='middle';
設置陰影
ctx.shadowColor='red';
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.shadowBlur=20
ctx.strokeRect(100,100,100,100)
陰影
