百姓娱乐棋牌

書名： 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 shadowOffsetX and shadowOffsetY value

官术网_书友最值得收藏!

Canvas Cookbook

Adding shadows to objects

How to do it...

How it works...

There's more...