HTML5 canvas (Shadow), html5 canvas shadow
Case 1:
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fillStyle="#eeeeff";
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>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350">：
Note:
(1) shadowOffsetX: the horizontal displacement of the shadow, that is, the distance from the horizontal movement of the image;
ShadowOffsetY: the vertical displacement of the shadow, that is, the distance from the vertical direction;
ShadowColor-the shadow color;
ShadowBlur-specifies the Blur range of the Shadow. This attribute is optional. If you do not want the edge of the shadow to be too clear, you can use this attribute to blur the edge of the shadow. The attribute value is generally set to 0-10;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
