Javascript HTML5 Canvas - 如何在图像背景上画一条线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10623678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas - How to Draw a line over an image background?
提问by geeky_monster
I am trying to draw a line on top of an image background - in an HTML5 Canvas . However always the line gets drawn behind the image . Actually the line gets drawn first and then the pictures get drawn - irrespective of how I call the functions.
我正在尝试在图像背景之上绘制一条线 - 在 HTML5 Canvas 中。然而，线条总是在图像后面绘制。实际上，首先绘制线条，然后绘制图片 - 无论我如何调用函数。
How do I bring the line to the top of the image ?
如何将线条带到图像的顶部？
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
drawbackground(canvas, context);
drawlines(canvas, context);
function drawbackground(canvas, context){
var imagePaper = new Image();
imagePaper.onload = function(){
context.drawImage(imagePaper,100, 20, 500,500);
};
imagePaper.src = "images/main_timerand3papers.png";
}
function drawlines(canvas, context){
context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 10;
// line color
context.strokeStyle = "black";
context.stroke();
}
回答by Chango
Totally untested code, but did you tried something like this?
完全未经测试的代码，但你有没有尝试过这样的事情？
function drawbackground(canvas, context, onload){
var imagePaper = new Image();
imagePaper.onload = function(){
context.drawImage(imagePaper,100, 20, 500,500);
onload(canvas, context);
};
imagePaper.src = "images/main_timerand3papers.png";
}
and then call the method like this...
然后像这样调用方法......
drawbackground(canvas, context, drawlines);
回答by Simon Sarris
To be more efficient, assuming you are going to be doing multiple redraws of this line or lines, would be to set the CSS background-imageof the canvas to be your image.
为了提高效率，假设您要对这条或多条线进行多次重绘，将background-image画布的 CSS 设置为您的图像。
<canvas style="background-image:url('images/main_timerand3papers.png');"></canvas>
回答by Sam
Change your image onload to something like this:
将您的图像 onload 更改为如下所示：
imagePaper.onload = function () {
context.drawImage( imagePaper, 100, 20, 500, 500 );
drawLines( canvas, context );
};
Then make sure you remove the earlier call to drawLines.
然后确保删除先前对 的调用drawLines。
The important take away to this solution, is that the onloadfunction will be executed sometime in the future, whereas the drawLines function is executed immediately. You must always be careful of how you structure your callbacks, especially when nesting them.
这个解决方案的重要收获是，该onload函数将在未来某个时候执行，而 drawLines 函数是立即执行的。您必须始终注意构造回调的方式，尤其是在嵌套它们时。
回答by aIKid
Or you can try this:
或者你可以试试这个：
drawbackground(canvas, context);
context.globalCompositeOperation = 'destination-atop';
drawlines(canvas, context);
