Question

是否可以将变换应用于阴影？例如，矩形的阴影是菱形的。

<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>

Answer 1

为什么不为此使用css3？您可以在此处找到如何执行此操作：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Answer 2

不，你不能将阴影与矩形分开转换。

你可以旋转矩形+阴影，如下所示：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>

html5画布变换阴影

2 个答案: