HTML5画布 - 使用绘画应用程序的不透明度问题 [英] HTML5 canvas - opacity problem with a paint app
问题描述
我正在尝试使用Canvas编写一个绘图应用程序。
它的工作方式是按下鼠标时的连接线。
当行不透明时效果很好，但是当我更改alpha参数时出现问题。
I'm trying to program a paint application using Canvas. the way it works is by connection lines when the mouse is pressed. when the line is opaque it works well, but when I change the alpha parameter I get a problem.
我尝试了两个选项：
a。当鼠标第一次关闭时路径开始，鼠标再次启动时结束：
鼠标的每次移动都会调用stroke（）函数。因为该行是透明的，所以整个路径的开头将变为不透明而末端不会，因为stroke（）被多次调用，并且它一次又一次地成为整个路径。
a. The path begins when the mouse is down for the first time and ends when the mouse is up again: every move of the mouse calls the stroke() function. because the line is transparent the beginning of the whole path will become opaque and the end won't, because stroke() is called many times, and it drwas the whole path again and again.
b。路径开始和结束鼠标的每次移动：
线路在整个路径上是透明的，但每条路径和路径之间的匹配点不太透明（因为它们由两条线组成）。所以整个路径都不稳固。
b. The path begins and ends every move of the mouse: the line is transparent through the whole way, but the matching point between every path and path are less transparent (because they're made of two lines). so the whole path is not solid.
我得到一个好结果的唯一方法就是当我再次调用鼠标时调用stroke（）。然后它会很好地描绘整个路径，但实际绘制它时我什么也看不见。
the only way I get a good result is when I call stroke() only when the mouse is up again. then it strokes the whole path well, but I see nothing while actually drawing it.
我该怎么办？
谢谢
推荐答案
我认为最好的办法是创建第二个覆盖画布（使用绝对定位）主画布。
I think your best bet is to create a second overlay canvas that is positioned (using absolute positioning) over your primary canvas.
在鼠标拖动过程中，对于每个 mousemove 事件，使用clearRect（）清除叠加画布然后绘制整个正在进行的笔画。
During a mouse drag, for every mousemove event use a clearRect() to clear your overlay canvas and then draw the entire stroke-in-progress.
当你得到 mouseup 时，清除叠加并绘制主画布的整个笔画。
When you get a mouseup, clear the overlay and draw the entire stroke to the primary canvas.
这是一个实例：
这篇关于HTML5画布 - 使用绘画应用程序的不透明度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
