什么是canvas
- canvas是h5新增的api,正如字面意思画布一样，是用来做画东西的
创建上下文
<canvas id="canvas" width="600" height="600">
// 需要注意的是，如果设置style为px像素是设置容器的宽高，不是真正的canvas的宽高
// 如果需要设置画布的宽高，只需要设置画布的width和height属性即可
let canvas = document.querySelector("#canvas");
let ctx=canvas.getContext("2d");
绘制矩形 fillRect(x,y,width,height)
ctx.fillStyle="#f60";
ctx.fillRect(0,0,300,300);
在这里插入图片描述
绘制描边矩形 strokeRect(x,y,width,height)
ctx.strokeRect(10,10,100,100)
ctx.strokeStyle="#00f";
在这里插入图片描述
绘制路径
- moveTo(x,y) 定义线条的开始坐标
- lineTo(x,y) 定义线条的结束坐标
- lineWidth = num 设置线条的粗细
ctx.lineWidth = 10
ctx.moveTo(300,300)
ctx.lineTo(200,200)
ctx.stroke()
在这里插入图片描述
绘制圆形 arc(x,y,r,start,stop)
ctx.beginPath();
ctx.strokeStyle="#f60"
ctx.arc(100,100,10,0,2*Math.PI)
ctx.stroke()
在这里插入图片描述
绘制文本
ctx.font = "60px Arial";
ctx.fillText("hello canvas",200,200) // 绘制实心文本
ctx.strokeText("hello canvas",200,300) // 绘制空心文本
在这里插入图片描述
canvas渐变gradient
- 线性渐变linearGradient <font color="#f60">createLinearGradient(x,y,x1,y1) </font>
// 创建线性渐变
let gradient = ctx.createLinearGradient(100,50,150,0);
gradient.addColorStop(0,"#f60");
gradient.addColorStop(1,"#0096e6")
// 填充线性渐变
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,100)
在这里插入图片描述
- 径向渐变radialGradient <font color="#f60">createRadialGradient(x,y,r,x1,y1,r1) </font>
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,80,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
`
在这里插入图片描述
绘制图片 drawImage(img,x,y,width,height)
let img = document.querySelector("img");
img.onload = ()=>{
ctx.drawImage(img,100,100,200,200)
}
在这里插入图片描述
