1

図形のコレクションを表示するHTML5Canvasを使用したアプリケーションを開発しています。それぞれの形状で、形状の側面の1つにストロークを付けたいのですが、すべての側面にストロークを与えるか、別の線を使用して形状を壊し、塗りつぶしを停止しない限り、これを行うことはできません。

片側にストロークがあり、塗りつぶしのある図形を描画するにはどうすればよいですか？

前もって感謝します。

4

1 に答える 1

2

1つの方法は、パスが完全に完了していないときにストロークを呼び出すことです。したがって、既にプロットしたものだけをストロークします。明らかに、最初に側面を描画しない場合は、ストロークしたいので、これは機能しません。そのため、以下に別のオプションがあります。

​var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 256;

​ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.lineWidth = 2;

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,100);
ctx.stroke();
ctx.lineTo(100,200);
ctx.lineTo(50,100);
ctx.lineTo(50,50);
ctx.fill();

<ahref="http://jsfiddle.net/BVtLL/"rel="nofollow">ライブデモ

これは、探しているものを実現するための別の方法としての概念実証機能の簡単な汚い証拠です。

ライブデモ2

var shape = [{x:50,y:50}, {x:100, y:100}, {x:100, y:200}, {x:50,y:100}, {x:50, y:50}];

function drawShape(shape, strokeIndex){
    ctx.beginPath();
    ctx.moveTo(shape[0].x, shape[0].y);

    for(var i = 1; i < shape.length; i++){
        ctx.lineTo(shape[i].x, shape[i].y);   
    }
    ctx.closePath();
    ctx.fill();

    // stroke
    ctx.beginPath();
    ctx.moveTo(shape[strokeIndex-1].x, shape[strokeIndex-1].y);
    ctx.lineTo(shape[strokeIndex].x, shape[strokeIndex].y);
    ctx.stroke();
}

drawShape(shape, 3);

</ p>

于 2012-10-26T13:45:04.143 に答える