HTML5画布 - 我的线条/弧线不会出现在图像的顶部 [英] HTML5 Canvas - my lines/arcs are not appearing on top of an image

问题描述

我使用lineTo（）绘制了一些线条，使用arc（）绘制了一些弧线。我想绘制这些形状，我用他们的黑色轮廓创建，清晰可见，在我拥有的蓝色/白色背景上。这是非常轻，所以我知道黑色将显示。但事实并非如此。

我用画布本身来放置背景图片，这是错误的吗？这是相关的代码：

  blueprint_background.onload = function（）{
 var pattern = context.createPattern（this， 重复）; 
 context.fillStyle = pattern; 
 context.rect（margin_x，margin_y，eff_width，eff_height）; 
 context.fill（）; 
}; 
  

以及我美丽的身材：

  //三角形的三边
 context.beginPath（）; 
 context.moveTo（loc_x，loc_y）; 
 context.lineTo（loc_x，loc_y + 30）; //垂直向下
 context.moveTo（loc_x，loc_y）; 
 context.lineTo（loc_x + 20，loc_y + 15）; 
 context.moveTo（loc_x，loc_y + 30）; 
 context.lineTo（loc_x + 20，loc_y + 15）; //以其他方式完成三角形
 context.stroke（）; 
  

顺便说一句，如果任何人想要使用画布绘制形状的坏习惯，它成为习惯之前。例如，如果我应该调用closePath（）方法或其他东西，我在调用stroke（）之后想知道。

但是我的主要问题是我看不到图像背景上的黑线。

感谢您的帮助。 三角形不在背景的 onload 部分之外，那么这可以解决它：

  blueprint_background.onload = function（）{
 // background 
 var pattern = context.createPattern（this，repeat）; 
 context.fillStyle = pattern; 
 context.rect（margin_x，margin_y，eff_width，eff_height）; 
 context.fill（）; 
 draw_triangle（）; 
}; 
 
函数draw_triangle（）{//单独函数
 //三角形
 context.beginPath（）：
 context.moveTo（loc_x，loc_y）; 
 context.lineTo（loc_x，loc_y + 30）; 
 context.moveTo（loc_x，loc_y）; 
 context.lineTo（loc_x + 20，loc_y + 15）; 
 context.moveTo（loc_x，loc_y + 30）; 
 context.lineTo（loc_x + 20，loc_y + 15）; 
 context.stroke（）; 
}; 
  

这是因为你的背景必须等到它加载完成，这将导致背景绘制三角形顶部。

I have some lines drawn using lineTo() and some arcs using arc(). I would like to draw these shapes I've created with their black-outlines clearly visible on top of a blue/white coloured background that I have. It's pretty light so I know that the black will show. But it doesn't.

I used the canvas itself to place the background image, is this wrong? Here's the relevant code:

blueprint_background.onload = function(){
var pattern = context.createPattern(this, "repeat");
context.fillStyle = pattern;
context.rect(margin_x,margin_y,eff_width,eff_height);
context.fill();
};

And my beautiful shape:

//the three sides of the triangle
context.beginPath();
context.moveTo(loc_x, loc_y);
context.lineTo(loc_x, loc_y + 30); //vertical downwards
context.moveTo(loc_x, loc_y);
context.lineTo(loc_x + 20, loc_y + 15);
context.moveTo(loc_x, loc_y + 30);
context.lineTo(loc_x + 20, loc_y + 15); //go the other way to complete the triangle
context.stroke(); 

By the way if anybody wants to call be out on bad practices for drawing shapes using canvas, go for it before it becomes habit. For example I'm wondering after I call stroke() if I should call a closePath() method or something.

But yeah my main issue is that I can't see the black lines on top of my image background.

Thanks for any help.

解决方案

If the codes for your triangle is outside of the background's onload part, then this might fix it:

blueprint_background.onload = function(){
    //background
    var pattern = context.createPattern(this, "repeat");
    context.fillStyle = pattern;
    context.rect(margin_x, margin_y, eff_width, eff_height);
    context.fill();
    draw_triangle();
};

function draw_triangle(){                       //seperate function
    //triangle
    context.beginPath():
    context.moveTo(loc_x, loc_y);
    context.lineTo(loc_x, loc_y + 30);
    context.moveTo(loc_x, loc_y);
    context.lineTo(loc_x + 20, loc_y + 15);
    context.moveTo(loc_x, loc_y + 30);
    context.lineTo(loc_x + 20, loc_y + 15);
    context.stroke(); 
};

It is because your background will have to wait until it loaded, which will result in the background drawing on top of your triangle.

这篇关于HTML5画布 - 我的线条/弧线不会出现在图像的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！