javascript - Canvas 重叠元素

标签 javascript animation canvas

我有一个 Canvas 动画,有时会在另一个元素上重新绘制完全相同的元素(这是一个很长的故事,为什么这是必要的),但它发生了,而且经常发生。

现在我假设在图像的现有精确副本上绘制元素(使用上下文路径和描边方法)对我的动画没有任何作用。相反,它会绘制过去的图像并模糊所有侧面(就好像它没有完全绘制在同一位置一样。

The normal image without blurry sides

The image with blurry sides

如果有办法解决这个问题,请告诉我

谢谢

最佳答案

发生这种情况是因为 Canvas 描边是抗锯齿的。在实际意义上,您在其他一些半透明像素上绘制一些半不透明像素,并且在像素重叠的地方,它们的不透明度被添加在一起。我认为您(当前)无法强制 Canvas 对象关闭笔画的抗锯齿功能,因此您可能只能忍受它。问题有那么大吗?

http://img813.imageshack.us/img813/303/canvasl.png

编辑:我想您可以尝试使用具有透明背景的 PNG 作为标记,而不是用笔画绘制它们。 https://developer.mozilla.org/en/Canvas_tutorial/Using_images

关于javascript - Canvas 重叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5188336/

相关文章:

javascript - Vue.js 和 masonry - 本地和远程的不同行为

windows-phone-7 - 如何为页面中的每个 UI 元素应用旋转门效果

Javascript - 客户端上的 Poly 剪辑图像

javascript - HTML5 : How do you place a fixed Text Input over a centering canvas?

javascript - 奇怪的 setState 用法

javascript - ajax xml 加载后 jQuery 切换不起作用

javascript - 为什么 ng-bind-html 只显示文本而不显示链接?

javascript - Highcharts 渲染动画反转?

jquery - Smoothstate.js 反向动画不起作用

javascript - 在 Facebook 上分享 Canvas