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 に答える