5

キャンバスにストローク塗りを描画する必要があります。このために、私は別々に呼び出しctx.fillますctx.stroke。これにより、避けたい塗りの上にストロークの影が描画されます。

これを回避する方法があれば誰か教えてください。

これが私のコードです：

ctx1.fillStyle = "blue";
ctx1.strokeStyle = "black";
ctx1.shadowColor = "rgba(0,255,0, 1)";
ctx1.shadowOffsetX = 50; 
ctx1.shadowOffsetY = 50;
ctx1.lineWidth = "20";
ctx.beginPath();  
ctx.moveTo(300, 100);  
ctx.lineTo(400, 100);  
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();

ctx1.fill();
ctx1.stroke();

http://jsfiddle.net/abWYZ/3/

4

1 に答える 1

3

コンテキストで描画アクションを実行するたびに、影も描画されます。キャンバスが機能する方法は、描画されたすべてのものが以前にあったものの上に配置されることです。何が起こっているのかというと、塗りつぶしが実行され、その影が作成され、次にストロークが描画され、以前に描画されたすべてのオブジェクトの上に影が作成されます。

ここに考えられる解決策の 1 つがあります。

ライブデモ

 // Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

ctx.save();
ctx.fillStyle = "blue";
ctx.strokeStyle  = "black";

ctx.lineWidth="20";
ctx.beginPath();  
ctx.moveTo(300, 100);  
ctx.lineTo(400, 100);  
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();

ctx.shadowColor = "rgba(0,255,0, 1)";
ctx.shadowOffsetX = 50; 
ctx.shadowOffsetY = 50;

ctx.stroke();
ctx.fill();
// clear the shadow
ctx.shadowColor = 0;
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0;

// restroke w/o the shadow
ctx.stroke();

このようなアプローチを使用するtoggleShadow場合は、影がいつ描画されるかを制御できるように、これらの線に沿って呼び出される関数または何かを作成することをお勧めします。

于 2012-11-20T15:44:43.787 に答える