你的位置:首页 > 网页设计

[网页设计]HTML5画布(阴影)


案例1:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fill;
cxt.fillRect(0,0,400,320);

cxt.shadowOffsetX=10;
cxt.shadowOffsetY=10;
cxt.shadowColor='rgba(100,100,100,0.5)';
cxt.shadowBlur=7.5;

cxt.translate(60,60);
for( var i=0;i<6;i++)
{
cxt.translate(50,50);
cxt.scale(0.8,0.8);
cxt.rotate(Math.PI/10);
createStar(cxt);
cxt.fill();
}

function createStar(cxt){
var n=0;
var dx=0;
var dy=0;
var s=50;
cxt.beginPath();
cxt.fillStyle='rgba(255,0,0,0.5)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
cxt.lineTo(dx+x*s,dy+y*s);
}
cxt.closePath();
}

}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" >您的浏览器不支持
</canvas>

</body>
</html>

效果图:

注释:
(1)shadowOffsetX--阴影的横向位移量,即图形横向方向移动的距离;
shadowOffsetY--阴影的纵向位移量,即纵向方向移动的距离;
shadowColor--阴影的颜色;
shadowBlur--阴影的模糊范围,该属性是可选的。如果不希望阴影的边缘太清晰,需要将阴影的边缘模糊化时可以使用该属性。属性值一般设定在0-10之间;