canvas常用语法

canvas  指定固定尺寸的矩形框

不支持的话<canvas>你的浏览器不支持canvas</canvas>会显示标签内的文字

getContext 判断浏览器是否支持  getContext判断是否支持

---

1.开启画笔

canvas.getContext('2d')  开启2d模式进行绘画

canvas.getContext('webgl')   

创建一个WebGLRenderingContext对象作为      《3D》  渲染的上下文，只在实现了WebGL 2的浏览器上可用，实验性特性。

---

2.开始位置   

左上角为绘图原点以像素为单位

---

3多次作画的时候要先擦除

clearRect()擦除区域内的绘画

---

globalAlpha画布的全局透明图  范围超过0~1会忽略

4画一个矩形

ctx.fillRect(x,y,w,h)  fillRect

ctx.fillStyle=""  设置填充的颜色

ctr.strokeStyle  设置描边的颜色

ctr.stroke()  描边填充

ctr.fill()实体填充

---

5利用path绘制复杂的路径

var path=new Path2d();

lineWidth()

lineCap()

lineJoin（)

MoveTo()

lineTo()

drawPath()

---

6画弧

path.arc(x,y,r,开始位置角度，结束位置角度，是否逆时针)

cavas.context('2d').strokeStyle="颜色"

canvas.context('2d').stroke(path)

canvas.getContext('2d').arc(x,y,r,起始角度，结束角度，是否逆时针)

---

7绘制文本

let ctx=canvas.getContext('2d');

ctx.clearRect(0,0,canvas.width,canvas.height) //先清除画布

阴影及其偏移量

ctx.shadowOffsetX=2;

ctx.shadowOffsetY=2;

ctx.shadowBlur //阴影模糊度

ctx.shadowColor  阴影的颜色

ctx.textBaseline  文本对齐的基线

ctx.textAlign

ctx.font="字号 字体"

ctx.fillStyle="颜色"

ctx.fillText(要填充的文字，x,y)

canvas.getContext('2d').fillText()

绘制文本   ctx.font="字号  字体颜色"  ctr.fillText(要填充的文字，x,y)

---

8图片

画图片drawImage(image,x,y,width,height)

canvas图像转化成一张图片

toDataURL('image/jpeg')   返回值为base64图片的数据

---

ctx.save()

ctx.restore()

中间的代码 保留其设置   下面的代码相当于初始化

---

优化方案 

1创建一个不可见的canvas 将结果绘制到可见的canvas中

2整数坐标  少用浮点数坐标

3多个canvas 绘制不同的图层

4背景图不变的话用img