不朽情缘5滴血是多少

書名： Canvas Cookbook
作者名： Bhushan Purushottam Joshi
本章字數： 232字
更新時間： 2021-07-16 11:03:15

Drawing text

This is a simple recipe rendering text:

How to do it...

The recipe is as follows:

<html>

<head>
 
<title>A Simple 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');

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

    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.font='20pt Arial';

    ctx.textAlign=align;
    ctx.textBaseLine=baseline;
    ctx.fillText(message,X,Y);
    ctx.closePath();
  }
  function drawLine(xstart,ystart,xend,yend,width,color,cap)
  {
    ctx.beginPath();
    ctx.strokeStyle=color;  
    ctx.lineWidth=width;
    ctx.lineCap=cap;
    ctx.moveTo(xstart,ystart);
    ctx.lineTo(xend,yend);
    ctx.stroke();
    ctx.closePath();
  }
</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...

The output demonstrates the textAlign property. The values for this property can be left, right, center, start, or end. The value start is the same as left if the direction of text is from left to right, and the text display starts from the coordinates specified. In this recipe, it starts from 400,100 and 400,200 for two different texts. Observe the last text. The text seems to end on the line; however, the property is set with the value start. This happens because of this statement:

ctx.direction="rtl";

The direction of text rendered on the canvas is changed from default to right-to-left, so the start of the text changes. By default the direction is inherited from the parent element. Otherwise, it can be set to left-to-right or right-to-left.

There's more...

Use the strokeText() method instead of fillText(). You will need to replace fillStyle() with strokeStyle().

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

Canvas Cookbook

Drawing text

How to do it...

How it works...

There's more...