html5 canvas转换阴影

是否可以将转换应用于阴影？例如，对矩形的阴影呈菱形。html5 canvas转换阴影

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

来源

2013-02-25 Yorik Ziru

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

来源

2013-02-25 20:03:46 user2108702

我知道这个CSS功能。需要使用画布API转换阴影，而不使用CSS。 – 2013-02-25 20:08:36

不，你不能单独从矩形变换阴影。

您可以旋转两个矩形+阴影像这样：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-25 20:22:45 markE

感谢您的回答。我需要不再重复它的来源形式的“落下”阴影，如矩形 - >菱形，圆形 - >椭圆形等。绘制两个独立的对象将做到这一点，但这不是我需要的。 – 2013-02-25 21:01:45

要显示第二个阴影对象“正在落下”，您应该检查Skew变形。这篇文章适用于Photoshop，但它适合您的情况，因为这些信息实际上是关于歪斜图像副本以创建透视阴影效果的... http：//www.adobetutorialz.com/articles/218/1/Perspective-Shadow – markE 2013-02-25 21:19:52

html5 canvas转换阴影

回答

相关问题