canvas总结

1.注意点

​ —canvas图像的渲染有别于html图像的渲染，
​ canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题
​ 写canvas代码一定要具有同步思想
​ —在获取上下文时，一定要先判断
​ —画布高宽的问题
​ 画布默认高宽300*150
​ 切记一定要使用html的attribute的形式来定义画布的宽高
​ 通过css形式定义会缩放画布内的图像
​ —绘制矩形的问题
​ a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，
​ 一旦出现小数边框都会向上取整

e.g:如下

​ context.strokeRect(10,10,50,50)
​ :边框会渲染在10.5 和 9.5之间,浏览器是不会让一个像素只用自己的一半的
​ 相当于边框会渲染在9到11之间
​ context.strokeRect(10.5,10.5,50,50)
​ :边框会渲染在10到11之间

​ b.canvas的api只支持一种图像的直接渲染：矩形
​ —我们没法使用选择器来选到canvas中的图像

2.画布api

​ oc.getContext(“2d”):获取画布的2d上下文
​ oc.width:画布在横向上css像素的个数
​ oc.height:画布在纵向上css像素的个数
​ oc.toDataUrl():拿到画布的图片地址

3.上下文api

​ ctx.fillRect(x,y,w,h):填充矩形
​ ctx.strokeRect(x,ymwmh):带边框的矩形
​ ctx.clearRect(0,0,oc.width,oc.height):清除