- Canvas Cookbook
- Bhushan Purushottam Joshi
- 171字
- 2021-07-16 11:03:15
Adding shadows to objects
Here, we will be using our first recipe. Just a few properties are set and we get a different output as shown:
Notice the difference between this and the output of the first recipe. Here you will notice a shadow for each line.
How to do it...
We use a few shadow-related properties to build this recipe:
<html>
<head>
<title>Line Shadow</title>
<script type="text/javascript">
var can;
var ctx;
function init() {
can = document.getElementById("MyCanvasArea");
ctx = can.getContext("2d");
drawLine(30,30,300,30,20,"orange","butt"); //default cap style
drawLine(30,80,300,80,20,"crimson","round");
drawLine(30,130,300,130,20,"teal","square");
}
function drawLine(xstart,ystart,xend,yend,width,color,cap)
{
ctx.beginPath();
ctx.strokeStyle=color;
ctx.lineWidth=width;
//adding shadow
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 7;
ctx.shadowColor = "gray";
//shadow properties set above
ctx.lineCap=cap;
ctx.moveTo(xstart,ystart);
ctx.lineTo(xend,yend);
ctx.stroke();
ctx.closePath();
}
</script>
</head>
<body onload="init()">
<br/><br/>
<center>
<canvas id="MyCanvasArea" width="320" height="200" style="border:3px solid brown;">
</canvas>
</center>
</body>
</html>
How it works...
The properties related to the shadow mentioned in the previous recipe are used here. Here the shadow is applied to the line rather than the text. Thus, shadows can be applied to objects.
There's more...
Try the following:
- Change the shadow color
- Change the blur value for the shadow
- Change the
shadowOffsetXandshadowOffsetYvalue