我在html5画布中有一个涂鸦应用程序,我正在试图找出实现橡皮擦控件的最佳方法.第一个冲动只是让橡皮擦绘制背景颜色[白色],但这是有问题的,因为如果用户将图像或其他图层移动到之前擦除的位置,他们会看到白色图纸被删除的位置.
理想情况下,我希望擦除控件将像素更改为黑色透明.我不能简单地使用lineTo来做这件事,因为很明显,它只是在它上面绘制一条黑色透明线,这样就不会触及原始涂层.关于如何做到这一点的任何想法?
谢谢.
and*_*wmu 52
如果要绘制黑色透明笔划,您可能需要:
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";
Run Code Online (Sandbox Code Playgroud)
请记住保存以前的globalCompositeOperation,然后稍后恢复,否则透明度将无法正常工作!
小智 5
请注意,firefox 3.6/4.0首先通过擦除整个背景来实现"复制".w3c文档并不清楚这里应该发生什么.Chrome(webkit?)将规范解释为"仅实际绘制像素的位置",例如stroke()的结果.
使用"rgba(255,255,255,1.0)"的目标输出,将背景设置为透明,其中帧缓冲区中的像素不透明.在chrome和firefox中留下透明背景.
在本地复制以下页面,并使用蓝色框和红色圆圈的各种颜色/不透明度,并且不要忘记使页面的背景颜色为非白色!和
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
你会发现浏览器完全不同.
| 归档时间: |
|
| 查看次数: |
20294 次 |
| 最近记录: |