0

影に変形を適用することはできますか? たとえば、長方形の影はひし形でした。

<div><canvas id="myCanvas" width="900" height = "700" style="border:solid 1px #000000;"></canvas></div>

<script>
    var context = document.getElementById("myCanvas").getContext("2d");

    function draw_rectangle() {
        context.shadowOffsetX = 50;
        context.shadowOffsetY = 50;
        context.shadowBlur = 5;
        context.shadowColor = "DarkGoldenRod";
        context.strokeStyle = "Gold";
        context.strokeRect(200, 200, 100, 120);
    }
    window.onload = draw_rectangle();
</script>
4

2 に答える 2

0

いいえ、長方形とは別にシャドウを変換することはできません。

次のように、長方形と影の両方を回転させる ことができます：http: //jsfiddle.net/m1erickson/W4fgp/

また、「影」用に1つの長方形と1つの長方形の2つのオブジェクトを別々に描画することもできます。

長方形と影を回転させるコードは次のとおりです。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

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

        ctx.rotate(.6);
        ctx.rect(150, 50, 50, 60);
        ctx.shadowOffsetX = 50;
        ctx.shadowOffsetY = 50;
        ctx.shadowBlur = 5;
        ctx.shadowColor = "DarkGoldenRod";
        ctx.strokeStyle = "Gold";
        ctx.stroke();

    }); // end $(function(){});
</script>

</head>

<body>
  <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-02-25T20:22:45.020 に答える
0

これに css3 を使用しないのはなぜですか? ここでその方法を見つけることができます: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

于 2013-02-25T20:03:46.343 に答える