第一步:将canvas转为2d模型 getContext
var canvas=document.querySelector("#canvas")
canvas.width=1500;//宽高直接设置属性值,不要写在样式上
canvas.height=1000;
var content=canvas.getContext("2d")
绘制矩形 fillRect
content.fillStyle="red"
content.fillRect(0,0,100,200)---x,y,w,h
content.fill()
绘制圆 arc
content.fillStyle="red"
content.arc(200,200,100,0,Math.PI*2,true)//x,y,r,起始角度,终止角度,顺时针/逆时针
content.fill()
绘制线
content.strokeStyle="green"
content.fillStyle="red"
content.lineWidth=10
content.moveTo(100,10)-开始位置
content.lineTo(100,110)
content.lineTo(200,110)
content.stroke()
content.fill()
圆形渐变
content.beginPath()
var rad=content.createRadialGradient(200,200,0,200,200,100)--起始坐标x,y,r,x1,y1,r1-终止坐标半径
rad.addColorStop(0.1,"red")
rad.addColorStop(0.2,"orange")
rad.addColorStop(0.3,"yellow")
rad.addColorStop(0.4,"green")
rad.addColorStop(0.5,"aquamarine")
rad.addColorStop(0.6,"blue")
rad.addColorStop(0.7,"plum")
rad.addColorStop(0.8,"pink")
rad.addColorStop(0.9,"paleturquoise")
rad.addColorStop(1,"darkorange")
content.fillStyle=rad
content.arc(200,200,100,0,Math.PI*2,true)
content.fill()
content.closePath()
线形渐变
content.beginPath()
var rad=content.createLinearGradient(200,200,200,100)
rad.addColorStop(0.1,"red")
rad.addColorStop(0.2,"orange")
rad.addColorStop(0.3,"yellow")
rad.addColorStop(0.4,"green")
rad.addColorStop(0.5,"aquamarine")
rad.addColorStop(0.6,"blue")
rad.addColorStop(0.7,"plum")
rad.addColorStop(0.8,"pink")
rad.addColorStop(0.9,"paleturquoise")
rad.addColorStop(1,"darkorange")
content.fillStyle=rad
content.arc(200,200,100,0,Math.PI*2,true)
content.fill()
content.closePath()
文字渐变
var rad=content.createLinearGradient(0,0,0,100)
rad.addColorStop(0.1,"red")
rad.addColorStop(0.2,"orange")
rad.addColorStop(0.3,"yellow")
rad.addColorStop(0.4,"green")
rad.addColorStop(0.5,"aquamarine")
rad.addColorStop(0.6,"blue")
rad.addColorStop(0.7,"plum")
rad.addColorStop(0.8,"pink")
rad.addColorStop(0.9,"paleturquoise")
rad.addColorStop(1,"darkorange")
content.fillStyle=rad
content.font="100px STheiti, SimHei";
content.fillText("我canvas",0,100)
content.fill()
图像
var img=new Image()
img.src="./img/1.jpg"
content.drawImage(img,10,10,100,100)//(图像,,x,y,w,h)
content.drawImage(img,10,10,100,100,200,100,200,100)//(图像,x,y,w,h,x1,y1,w1,h1)裁剪后防治位置
清除区域clearRect
content.fillStyle="red"
content.fillRect(0,0,200,200)
content.fill()
content.clearRect(10,10,50,50)