0

我使用 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() 方法或其他方法。

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

谢谢你的帮助。

4

1 回答 1

0

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

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

于 2012-05-30T04:14:58.657 回答