什么是canvas
- canvas是h5新增的api,正如字面意思画布一样,是用来做画东西的
创建上下文
<canvas id="canvas" width="600" height="600">
let canvas = document.querySelector("#canvas");
let ctx=canvas.getContext("2d");
绘制矩形 fillRect(x,y,width,height)
ctx.fillStyle="#f60";
ctx.fillRect(0,0,300,300);
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/57091ba86095c35861b6ff673306b817.png)
绘制描边矩形 strokeRect(x,y,width,height)
ctx.strokeRect(10,10,100,100)
ctx.strokeStyle="#00f";
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d9fff898b879be2e03b15fa82885f7b8.png)
绘制路径
- moveTo(x,y) 定义线条的开始坐标
- lineTo(x,y) 定义线条的结束坐标
- lineWidth = num 设置线条的粗细
ctx.lineWidth = 10
ctx.moveTo(300,300)
ctx.lineTo(200,200)
ctx.stroke()
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7e9c1bfd05ab1e465f2c541cfb9125be.png)
绘制圆形 arc(x,y,r,start,stop)
ctx.beginPath();
ctx.strokeStyle="#f60"
ctx.arc(100,100,10,0,2*Math.PI)
ctx.stroke()
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0685fb52e5853ca556271e8b8e5d89e9.png)
绘制文本
ctx.font = "60px Arial";
ctx.fillText("hello canvas",200,200)
ctx.strokeText("hello canvas",200,300)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bdfb2a54b36b54f2ffce433635365e84.png)
canvas渐变gradient
- 线性渐变linearGradient createLinearGradient(x,y,x1,y1)
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)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/30de2fb7c5ac3ee6571d772a33e1515f.png)
- 径向渐变radialGradient createRadialGradient(x,y,r,x1,y1,r1)
// 创建渐变
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);
`
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/47e9b1eee5cddf4c24c6a2ccb0600dee.png)
绘制图片 drawImage(img,x,y,width,height)
let img = document.querySelector("img");
img.onload = ()=>{
ctx.drawImage(img,100,100,200,200)
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8cf796aa067d3f33e986b785647008d9.png)