canvas 笔记

// 获取上下文
let ctx = canvas.getcontext(‘2d’);

/-----矩形的绘制------/
// 填充矩形 （先设置颜色，然后画出矩形才会生效）
ctx.fillStyle = ‘rgb(200,0,0)’;

// x y坐标 宽高
ctx.fillRect(10,10,350,300)

// 描边 (同样先设置颜色，然后画出矩形)
ctx.strokeStyle = ‘rgba(0,0,200,0.5)’
ctx.strokeRect(30,30,350,300)

// 清除矩形
ctx.clearRect(45,45,60,60)

/-----点线的绘制------/
// 绘制一个三角形
ctx.beginPath() // 开始路径

// 起始点
ctx.moveTo(70,50)

// 到哪个点
ctx.lineTo(100,75)
ctx.lineTo(100,25)

// 线条闭合
ctx.closePath()

// 描边线条 或者填充(闭合完再填充颜色)
ctx.stroke() ctx.fill()

/-----圆的绘制------/
ctx.strokeStyle = ‘orange’
// 圆线条宽细
ctx.lineWidth = 10

// 圆的参数 (圆心x,y 半径 开始角度 结束角度 顺时针/逆时针)
ctx.arc(x,y,radius,startAngel,endAngel,antic)
ctx.stroke()

/-----渐变------/
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, “blue”);
grd.addColorStop(1, “red”);
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

/-----图片------/
let img = new Image();
img.src = ‘image.png’
img.onload = function(){
/*
参数1 图像
参数2 x轴
参数3 y轴
参数4 宽度
参数5 高度
参数6 绘制x轴
参数7 绘制y轴
参数8 绘制宽度
参数9 绘制高度
/
ctx.drawImage(this,0,0,120,100,150,50,100,50)
}
/* 注意 fill 和 fillRect 区别 **/
ctx.fillStyle = “green” // 选好填充颜色
ctx.fillRect(20,20,150,150) // 再填充矩形 填充才会生效

ctx.rect(20,20,150,100); // 先用rect画矩形 在调用fill填充颜色
ctx.fillStyle=“green”;
ctx.fill();