Question

我有一些使用lineTo（）绘制的线条和一些使用arc（）的弧线。我想绘制这些我用蓝色/白色背景清晰可见的黑色轮廓创建的形状。这很轻，所以我知道黑色会显示出来。但事实并非如此。

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

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();
};

我漂亮的形状：

//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();

顺便说一句，如果有人想要使用画布绘制形状的不良做法，请在它成为习惯之前先去做。例如，我在调用stroke（）之后想知道是否应该调用closePath（）方法。

但是，我的主要问题是我无法在图像背景上看到黑线。

感谢您的帮助。

Answer 1

如果三角形的代码位于背景的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();
};

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(); 
};

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

HTML5 Canvas - 我的线条/弧线没有出现在图像的顶部

1 个答案: