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轉換陰影

回答

相關問題