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

  • Canvas Cookbook
  • Bhushan Purushottam Joshi
  • 217字
  • 2021-07-16 11:03:15

Drawing 3D text with shadows

If 2D text doesn't get you jazzed, you might consider drawing 3D text instead. Although the HTML5 canvas API doesn't directly provide us with a means of creating 3D text, we can certainly create a custom draw3dText() method using the existing API:

Drawing 3D text with shadows

How to do it...

The recipe is as follows:

<html>
<head>

<title>A 3D Text</title>
<script>
  function init()
  {
    can  = document.getElementById("MyCanvasArea"); 
    
    ctx = can.getContext("2d");
    
    var X=Math.round(can.width/2);
    
    drawLine(X,10,X,390,2,'black','butt');

    draw3dText(X,50,'Sujata-An Architect & an Entrepreneur','center','top','blue',1);
    draw3dText(X,100,'Prashant-An MBA','left','middle','green',2);
    draw3dText(X,150,'Amit-An Engineer','right','bottom','red',3);
    draw3dText(X,200,'Sampada-An Engineer','start','alphabetic','orange',4);
    draw3dText(X,250,'Sukhada-A Classical Singer','end','hanging','aqua',5);
    draw3dText(X,300,'Kalyani-A Chartered Accountant','center','ideographic','magenta',6);
    ctx.direction="rtl";
    draw3dText(X,350,'Vivek-An IITian','start','alphabetic','navy',7);
  }
  function draw3dText(X,Y,message,align,baseline,color,depth)

  {

    ctx.beginPath();
    var i=0;
    ctx.font='20pt Arial';
    
    ctx.textAlign=align;
    ctx.textBaseLine=baseline;
    ctx.fillStyle=color;
    ctx.fillText(message,X,Y); 
    ctx.shadowColor="lightgrey";
    ctx.shadowBlur=5;
    while(i<=depth)
    {
        ctx.shadowOffsetX=depth+1;
        ctx.shadowOffsetY=depth+2;
        ctx.fillText(message,X,Y);   
        i++;
    }
    ctx.closePath();
  }
  function drawLine(xstart,ystart,xend,yend,width,color,cap)
  {
  //refer the first recipe
  //....
}
</script>
</head>
<body onload="init()">
  <canvas id="MyCanvasArea" width ="800"  height="400" style="border:2px solid black">
    
        Your browser doesn't currently support HTML5 Canvas.
    
  </canvas>
</body>
</html>

How it works...

This recipe is created by appending some code to the function for drawing the text. The properties to apply shadow are used on the text. The properties shadowColor, shadowOffsetX, shadowOffsetY, and shadowBlur are set to achieve the 3D effect. Before the loop begins, the text is drawn with the specified color. Then the shadow color and blur level is set. And within the loop, the text is drawn with changed X and Y offset for the shadow for certain depth. The properties used are summarized here:

There's more...

Try the following:

  • Changing the color of the shadow
  • Increasing the depth
主站蜘蛛池模板: 建平县| 阿尔山市| 铜鼓县| 岑溪市| 泸定县| 周宁县| 太谷县| 抚顺县| 广昌县| 兰西县| 平昌县| 洪洞县| 长阳| 定兴县| 东台市| 朝阳县| 惠州市| 西乡县| 郸城县| 大同县| 宜章县| 瓮安县| 铜鼓县| 长武县| 桃江县| 永兴县| 迭部县| 桂平市| 吉林省| 西贡区| 新余市| 雷州市| 突泉县| 苗栗县| 安仁县| 东台市| 肃南| 无锡市| 佛冈县| 西华县| 黔西县|