7

キャンバスに何かを描き、その影だけを表示する方法を見つけようとしています。たとえば、次のようになります。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=100;
ctx.shadowOffsetX = 150;
ctx.shadowColor="red";
ctx.fillStyle="rgba(0,0,0,0.7)";
ctx.fillRect(20,20,100,80);

ここでは、黒い四角形を描画し、オフセットで赤い影を追加します。四角形のない影だけを見たいと思います。

例でわかるように、rgba カラーを使用してみましたが、不透明度を設定すると影にも影響します。

このコードのフィドルは次のとおりです。http://jsfiddle.net/YYvFw/

4

2 に答える 2

14

最初に頭に浮かぶのは、長方形をキャンバスの外に移動し、必要なだけ影をオフセットすることです。

    var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    width = 100,
    height = 80,
    posX = 100,
    posY = 80;

    context.rect(-width, -height, width, height);
    context.shadowColor = 'red';
    context.shadowBlur = 40;
    context.shadowOffsetX = width+posX;
    context.shadowOffsetY = height+posY;
    context.fill();

x:100 y:80 に影を描画します

http://jsfiddle.net/S7WRx/2/

于 2013-06-12T09:43:31.393 に答える