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

你为什么不为此使用css3？在这里你可能会找到如何做到这一点：http ://www.w3schools.com/cssref/css3_pr_box-shadow.asp

于 2013-02-25T20:03:46.343 回答
0

不，您不能将阴影与矩形分开变换。

您可以像这样旋转矩形+阴影：http: //jsfiddle.net/m1erickson/W4fgp/

您也可以分别绘制 2 个对象，1 个矩形和 1 个矩形作为“阴影”。

这是旋转矩形+阴影的代码：

<!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 回答