CanvasRenderingContext2d bug 2 则,附解决方案

前言:这篇文章本来是上上次在 Autodesk 实习结束的时候 (2015.12) 就要发的,后来存在草稿箱给忘了,现在这两个 bug 并不知道还存不存在,本来是有计划写详细的代码示例的也搁置了.

第一个 bug 仅影响 Windows 平台的 Firefox.

当在 clip 过的 context 中绘制阴影时,如果在本次渲染周期前没有任何 fill 操作,clip 会失效. 后果是 clip 外的内容会被覆盖.

解决方案是在所有渲染操作前绘制一个透明的像素.

第二个 bug 有关于 IE 的 CORS.

IE 是部分支持 CORS 的,比如如果请求头设置正确的话图像是可以在 <img> 中正确加载并显示的,也可以通过 Image 类加载并绘制到 canvas 中. 然而,通过后者绘制的 canvas 将不能使用 toDataUrl (会报 SecurityError 异常).

解决方案是先使用 XHR 载入图像数据,然后将 ObjectUrl 赋值给 Image.src. 感谢微软,至少 XHR 的 CORS 还是能用的. (此处应有一颗药丸)

发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">