canvas注意事项
-
注意事项
1、canvas图像的渲染有别于HTML图像的渲染
canvas图像渲染极快,不会出现代码覆盖后延迟渲染的问题;
写canvas代码时一定要有同步思想
2、在获取上下文时,一定要先判断
3、画布宽高问题
画布默认宽高为300150*
设置画布宽高再attribute中设置,不能够再CSS中设置,这样会缩放画布内的图像
4、绘制矩形的问题
a、边框的像素问题:边框宽度是在偏移量上下分别渲染一半,可能会出现小数边框,一旦出现小数边框都会向上取整数
b、canvasAPI只支持一种图像的渲染:矩形 -
画布API
1、canvas.getContex(“2d”)
2、canvas.width
3、canvas.height -
上下文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像素的面积大小