<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)
阴影
