html5画布变换阴影
可以对阴影应用变换吗？ 例如，矩形的阴影是菱形的html5画布变换阴影,html,canvas,Html,Canvas,可以对阴影应用变换吗？ 例如，矩形的阴影是菱形的 <div><canvas id="myCanvas" width="900" height = "700" style="border:solid 1px #000000;"></canvas></div> <script> var context = document.getElementById("myCanvas").getContext("2d"); func
<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>
var context=document.getElementById（“myCanvas”）.getContext（“2d”）；
函数draw_rectangle（）{
context.shadowOffsetX=50；
context.shadowOffsetY=50；
context.shadowBlur=5；
context.shadowColor=“DarkGoldenRod”；
context.strokeStyle=“Gold”；
strokeRect（200200100120）；
}
window.onload=draw_rectangle（）；
在这里，您可能会发现如何执行此操作：不，您不能将阴影与矩形分开进行变换 可以按如下方式旋转矩形和阴影： 您还可以分别绘制两个对象，一个矩形和一个矩形作为“阴影” 下面是旋转矩形+阴影的代码：
<!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>
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
旋转（.6）；
ctx.rect（150,50,50,60）；
ctx.shadowOffsetX=50；
ctx.shadowOffsetY=50；
ctx.shadowBlur=5；
ctx.shadowColor=“DarkGoldenRod”；
ctx.strokeStyle=“黄金”；
ctx.stroke（）；
}); // end$（函数（）{}）；