canvas注意事项

canvas注意事项

1. 注意事项
   1、canvas图像的渲染有别于HTML图像的渲染
   canvas图像渲染极快，不会出现代码覆盖后延迟渲染的问题；
   写canvas代码时一定要有同步思想
   2、在获取上下文时，一定要先判断
   3、画布宽高问题
   画布默认宽高为300150*
   设置画布宽高再attribute中设置，不能够再CSS中设置，这样会缩放画布内的图像
   4、绘制矩形的问题
   a、边框的像素问题：边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，一旦出现小数边框都会向上取整数
   b、canvasAPI只支持一种图像的渲染：矩形

2. 画布API
   1、canvas.getContex(“2d”)
   2、canvas.width
   3、canvas.height

3. 上下文API
   ctx.fillRect(x,y,w,h)—填充矩形
   ctx.strokeRect(x,y,w,h)—带边框的矩形
   //绘制的样式
   ctx.clearRect(canvas.width,canvas.height)清除整个画布
   ctx.fillStyle
   ctx.strokeStyle
   ctx.linewidth
   ctx.lineCap
   ctx.lineJion
   //绘制的路径
   ctx.moveTo(x,y)—画笔抬起，点到(x,y)处
   ctx.lineTo(x,y)—将画笔移动到x,y处
   ctx.rect(x,y,w,h)—矩形
   ctx.arc(x,y,r,start,end,dir)—圆
   ctx,arcTo(x1,x2,y1,y2,r)—2个坐标，一个半径，结合moveTo使用
   ctx.beginPath()—清除路径容器
   ctx,closePaht()—闭合路径，fill自动闭合，stroke手动闭合
   ctx.save()—将当前状态（样式，变换）压入到样式栈中
   ctx.restore()—将样式栈中栈顶样式推出
   ctx.translate(x,y)—将原点按当前坐标轴位移x,y个单位
   ctx.rotate(弧度)—将坐标轴按顺时针方向旋转
   ctx.Scala(因子)—放大或缩小；注意：放大或缩小的是一个css像素的面积大小