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

  • 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
主站蜘蛛池模板: 古田县| 梧州市| 阳信县| 海南省| 崇文区| 阿坝县| 腾冲县| 上思县| 金湖县| 康马县| 安吉县| 江华| 惠东县| 平顶山市| 凉城县| 泰兴市| 若羌县| 漳州市| 宜宾市| 晋中市| 湖南省| 保山市| 富锦市| 慈利县| 西藏| 宁波市| 德庆县| 洪江市| 榆林市| 吐鲁番市| 永济市| 邢台市| 黑山县| 尤溪县| 长垣县| 卫辉市| 温州市| 新民市| 台北市| 会宁县| 潼关县|