canvas中遇到的一些问题汇总

1、canvas中绘图API中使用的尺寸一致，但是长度效果都不一样

在canvas的本身画布的大小只能通过canvas标签中的width和height进行设置。如果同时对canvas的css样式进行设置，会对canvas进行缩放，就好比对一张图片进行样式处理一样，会将其本身的尺寸缩放至我们设置的尺寸。

<canvas class="canvas"width="canvasWidth" height="canvasHeight"></canvas>

结论：canvas的尺寸最好是通过属性进行设置

2、改变canvas的宽高属性时，内容会被清空

如果在绘制了一部分之后改变canvas的宽高，则之前已经绘制的内容会被清空,并且设置的种种属性都会被还原（包括translate等设定的变化）

解决方案：

• 一开始就计算好canvas宽高，尽量不需要后期去修改宽高
• 使用getImageData将画布上内容上进行复制一份，然后改变尺寸之后再使用putImageData将内容放置回去
• 重新创建一块canvas，然后在这块canvas上改变宽高，然后使用drawImage将之前的canvas放置上去

踩坑记：

• 设定putImageData和getImageData中的坐标时受translate位移的影响，这个要注意；
• 在vue中，如果在data中创建了一个变canvasHeight，然后将canvasHeight动态绑定到canvas元素中

 <canvas class="canvas" ref="canvas"  :height="canvasHeight"></canvas>

如果直接这样修改

 this.canvasHeight=300

可能导致之后的putImageData操作出现未知错误

可以这样修改

 this.$refs.canvas.height=300

总结：其实最好还是在一开始就计算好画布的宽高，因为如果在之后的绘制中如果绘制的内容超出画布，使用getImageData等操作是无法获取到超出的内容的（包括故意将获取范围变大）。

3、关于解决canvas中图片跨域问题

如果在canvas中使用drawImage绘制图片时，可能会遇到以下错误

Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

或者下面问题

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.

这就说明遇到图片的跨域问题了，解决方案如下：
（image为drawImage中的image对象）

1、首先为image对象添加跨域属性

image.crossOrigin='Anonymous';

2、然后在图片的路径后面添加时间戳

image.src = imgUrl+'?timeStamp='+new Date();

4、使用canvas中lineTo画线出现的问题

在canvas中如果想要使用绘制多条起点不同，样式不同的直接，需要使用

ct.beginPath()
ct.moveTo();
ct.lineTo();
ct.closePath()