三番五次看Canvas中的文本属性

永利开户送38元体验金 1

  1. Text
    Align:当textAlign属性设置为left或start,并文书档案是从左到右对齐的时候,文本会居左对齐,或文书档案方向是从右向左,属性设置为end。当textalign属性设置为right或end,并文书档案方向为从左向右时,文本居右对齐,或文书档案方向为从右向左的时候属性设置为start,它也会居右对齐。假使未有设置属性,默许为start。它的值有startendleftcenter,
    right。

一、绘制文本

运用 canvas 绘制文本,主要的质量和格局如下:

  • font – 定义字体
  • fillText(text,x,y) – 在 canvas 上制图实心的公文
  • strokeText(text,x,y) – 在 canvas 上制图空心的文本

示例:

永利开户送38元体验金 2

image.png

<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script> 
    function draw() {
         var canvas=document.getElementById("cava1");
         var ctx=canvas.getContext("2d");  
       //实心文本
        ctx.font = "48px serif";
        ctx.fillText("Hello world", 10, 50);
        //空心文本
        ctx.font = "48px serif";
        ctx.strokeText("Hello world", 20, 120);
    } 
    draw(); 
</script>

轻巧的看一下例子

2、样式文本

有更加多的品质能够让您转移canvas展现文本的点子:

font = value
    当前大家用来绘制文本的样式. 那一个字符串使用和 CSS font
属性同样的语法. 暗许的书体是 十px sans-serif。
textAlign = value
    文本对齐选项. 可选的值包涵:start, end, left, right or center.
暗许值是 start。
textBaseline = value
    基线对齐选项. 可选的值包涵:top, hanging, middle, 阿尔法betic,
ideographic, bottom。暗许值是 阿尔法betic。
direction = value
    文本方向。大概的值包蕴:ltr, rtl, inherit。默许值是 inherit。

(一)font 字体样式

CanvasRenderingContext二D.font 是 Canvas 二D API
描述绘制文字时,当前字体样式的天性。
语法:ctx.font = value;

(二)textAlign文本的对齐形式

CanvasRenderingContext2D.textAlign 是 Canvas 贰D API
描述绘制文本时,文本的对齐方式的性格。

语法:ctx.textAlign = "left" || "right" || "center" || "start" || "end";
注意:该对齐是依据CanvasRenderingContext贰D.fillText方法的x的值。

此间的textAlign=”center”相比较奇特。textAlign的值为center时文件的居中是基于fillText所给x的值,正是说文本一半在x的左侧,百分之五10在x的右臂。
想让文本在全体canvas居中,须要将fillText的x值设置成canvas的增长幅度的十一分之伍。

direction属性会对此属性爆发潜移默化。
若果direction属性设置为ltr,则left和start的成效等同,right和end的职能等同;
假诺direction属性设置为rtl,则left和end的功力一样,right和start的遵从一样。

有效值:

left
    文本左对齐。
right
    文本右对齐。
center
    文本居中对齐。
start
    文本对齐界线早先的地方(左对齐指本地从左向右,右对齐指当地从右向左)。
end
    文本对齐界线截止的地方(左对齐指本地从左向右,右对齐指本地从右向左)。

(3)textBaseline 文本基线,决定文字垂直方向的对齐方式。

CanvasRenderingContext二D.textBaseline 是 Canvas 2D API
描述绘制文本时,当前文件基线的属性。
语法:ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";

有效值:

top
    文本基线在文件块的顶上部分。
hanging
    文本基线是悬挂基线。
middle
    文本基线在文书块的高级中学级。
alphabetic
    文本基线是明媒正娶的字母基线。
永利开户送38元体验金,ideographic
    文字基线是准备字基线;要是字符本人超过了阿尔法betic
基线,那么ideograhpic基线地点在字符本人的尾部。
bottom
    文本基线在文件块的底部。 与 ideographic 基线的区分在于 ideographic
基线无需考虑下行字母。

(四)direction 当前文件方向(此功用某个浏览器尚在支付中)

CanvasRenderingContext二D.direction 是Canvas 二D API
用来在绘制文本时,描述当前文件方向的性质。
语法:ctx.direction = "ltr" || "rtl" || "inherit";

有效值:

ltr
    文本方向从左向右。
rtl
    文本方向从右向左。
inherit
    根据气象后续 <canvas> 成分或然 Document 。

其余小说请访问:

  • canvas入门
  • canvas之渐变
  • canvas之文本
  • canvas之图像
  • canvas之变形

参考:路径-CanvasAPI|MDN

永利开户送38元体验金 3

<!DOCTYPE html>  <html>      <body>            <canvas id="myCanvas" width="300" height="200"  >              Your browser does not support the HTML5 canvas tag.          </canvas>            <script>              var c = document.getElementById("myCanvas");              var ctx = c.getContext("2d");                // Create a red line in position 150              ctx.strokeStyle = "blue";              ctx.moveTo(150, 20);              ctx.lineTo(150, 170);              ctx.stroke();                ctx.font = "15px Arial";                // Show the different textAlign values              ctx.textAlign = "start";              ctx.fillText("textAlign=start", 150, 60);              ctx.textAlign = "end";              ctx.fillText("textAlign=end", 150, 80);              ctx.textAlign = "left";              ctx.fillText("textAlign=left", 150, 100);              ctx.textAlign = "center";              ctx.fillText("textAlign=center", 150, 120);              ctx.textAlign = "right";              ctx.fillText("textAlign=right", 150, 140);            </script>        </body>  </html>

Text
Baseline:跟textAlign基本上同样,只是它是笔直对齐的也正是本着x轴对齐。它的值有

  1. top:文字的头顶跟X轴对齐(y坐标)
  2. bottom:文字的尾部对齐
  3. middle:居中对齐
  4. alphabetic:默认
  5. Hanging:跟top类似,但离x轴的距离更远一些(悬挂)

永利开户送38元体验金 4

<!DOCTYPE html>  <html>      <body>            <canvas id="myCanvas" width="400" height="200"  >              Your browser does not support the HTML5 canvas tag.          </canvas>            <script>              var c = document.getElementById("myCanvas");              var ctx = c.getContext("2d");                //Draw a red line at y=100              ctx.strokeStyle = "blue";              ctx.moveTo(5, 100);              ctx.lineTo(395, 100);              ctx.stroke();                ctx.font = "20px Arial"                //Place each word at y=100 with different textBaseline values              ctx.textBaseline = "top";              ctx.fillText("Top", 5, 100);              ctx.textBaseline = "bottom";              ctx.fillText("Bottom", 50, 100);              ctx.textBaseline = "middle";              ctx.fillText("Middle", 120, 100);              ctx.textBaseline = "alphabetic";              ctx.fillText("Alphabetic", 190, 100);              ctx.textBaseline = "hanging";              ctx.fillText("Hanging", 290, 100);            </script>        </body>  </html>

 

诸如此类,大家依据今天讲的三个内容及前边的稿子里关系的折射率及影子效果,更周详大家的公文调控器。

 

永利开户送38元体验金 5

永利开户送38元体验金 6永利开户送38元体验金 7View
Code

<!doctype html>  <html lang="en">      <head>          <meta charset="utf-8" />          <title>chp3-2</title>          <meta name="description" content="" />          <meta name="author" content="Administrator" />                  <script>              window.addEventListener("load", eventWindowLoaded, false);                            function eventWindowLoaded() {                  canvasApp();              }                            function canvasApp() {                  var message = "your text";                  var fillOrStroke = "fill";                  var fontSize = "50";                  var fontFace = "serif";                  var fontWeight = "normal";                  var fontStyle = "normal";                  var textBaseline = "middle";                  var textAlign = "center";                  var shadowX = 1;                  var shadowY = 1;                  var shadowBlur = 1;                  var shadowColor = "#000000";                  var textAltha = 1;                                    var theCanvas = document.getElementById("canvas");                  var context = theCanvas.getContext("2d");                                    var formElement = document.getElementById("textBox");                  formElement.addEventListener("keyup", textBoxChanged, false);                                    formElement = document.getElementById("fillOrStroke");                  formElement.addEventListener("change", fillOrStrokeChanged, false);                                    formElement = document.getElementById("textSize");                  formElement.addEventListener("change", textSizeChanged, false);                                    formElement = document.getElementById("textFont");                  formElement.addEventListener("change", textFontChanged, false);                                    formElement = document.getElementById("fontWeight");                  formElement.addEventListener("change", fontWeightChanged, false);                                    formElement = document.getElementById("fontStyle");                  formElement.addEventListener("change", fontStyleChanged, false);                                    formElement = document.getElementById("textBaseline");                  formElement.addEventListener("change", textBaselineChanged, false);                                    formElement = document.getElementById("textAlign");                  formElement.addEventListener("change", textAlignChanged, false);                                    formElement = document.getElementById("shadowX");                  formElement.addEventListener("change", shadowXChanged, false);                                    formElement = document.getElementById("shadowY");                  formElement.addEventListener("change", shadowYChanged, false);                                    formElement = document.getElementById("shadowBlur");                  formElement.addEventListener("change", shadowBlurChanged, false);                                    formElement = document.getElementById("textAlpha");                  formElement.addEventListener("change", textAlphaChanged, false);                                    drawScreen();                                    function drawScreen() {                      context.clearRect(0, 0, theCanvas.width,theCanvas.height);                      context.fillStyle = "#ffffaa";                      // context.fillRect(0, 0, theCanvas.width, theCanvas.height);                                            context.strokeStyle = "#000000";                      // context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);                                            context.font = "50px serif";                      context.textBaseline = textBaseline;                      context.textAlign = textAlign;                      context.globalAlpha = textAlpha;                      context.shadowColor = shadowColor;                      context.shadowOffsetX = shadowX;                      context.shadowOffsetY = shadowY;                      context.shadowBlur = shadowBlur;                                                                  var metrics = context.measureText(message);                      var textWidth = metrics.width;                                                              context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;                      //canvas中间点                      var xPosition =(theCanvas.width - textWidth)/2;                      var yPosition = theCanvas.height/2;                                            switch(fillOrStroke) {                          case "fill":                              context.fillStyle="#ff0000";                              context.fillText(message, xPosition, yPosition);                              break;                          case "stroke":                              context.strokeStyle = "#FF0000";                              context.strokeText(message, xPosition, yPosition);                              break;                          case "both":                              context.fillStyle="#ff0000";                              context.fillText(message, xPosition, yPosition);                              context.strokeStyle = "#000000";                              context.strokeText(message, xPosition, yPosition);                              break;                      }                  }                  function textBoxChanged(e) {                      var target = e.target;                      message = target.value;                      drawScreen();                  }                                    function fillOrStrokeChanged(e) {                      var target = e.target;                      fillOrStroke = target.value;                      drawScreen();                  }                                    function textSizeChanged(e) {                      var target = e.target;                      fontSize = target.value;                      drawScreen();                  }                                    function textFontChanged(e) {                      var target = e.target;                      fontFace = target.value;                      drawScreen();                  }                                    function fontWeightChanged(e) {                      var target = e.target;                      fontWeight = target.value;                      drawScreen();                  }                                    function fontStyleChanged(e) {                      var target = e.target;                      fontStyle = target.value;                      drawScreen();                  }                                    function textAlignChanged(e) {                      var target = e.target;                      textAlign = target.value;                      drawScreen();                  }                                    function textBaselineChanged(e) {                      var target = e.target;                      textBaseline = target.value;                      drawScreen();                  }                                    function shadowXChanged(e) {                      var target = e.target;                      shadowX = target.value;                      drawScreen();                  }                                    function shadowYChanged(e) {                      var target = e.target;                      shadowY = target.value;                      drawScreen();                  }                                    function shadowBlurChanged(e) {                      var target = e.target;                      shadowBlur = target.value;                      drawScreen();                  }                                    function shadowColorChanged(e) {                      var target = e.target;                      shadowColor = target.value;                      drawScreen();                  }                                    function textAlphaChanged(e) {                      var target = e.target;                      textAlpha = target.value;                      drawScreen();                  }                                }          </script>        </head>        <body>          <div  >              <canvas id="canvas" width="500"height="300">                </canvas>              <form>                  Text:                  <input id="textBox" placeholder="your text" />                  <br>                  Fill Or Stroke:                  <select id="fillOrStroke">                      <option value="fill">fill</option>                      <option value="stroke">stroke</option>                      <option value="both">both</option>                  </select>                  <br />                  Font Style:                  <select id="fontStyle">                      <option value="normal">normal</option>                      <option value="italic">italic</option>                      <option value="oblique">oblique</option>                  </select>                  <br />                  Font Weight:                  <select id="fontWeight">                      <option value="normal">normal</option>                      <option value="bold">bold</option>                      <option value="bolder">bolder</option>                      <option value="lighter">lighter</option>                  </select>                  <br />                  Text Font:                  <select id="textFont">                      <option value="serif">serif</option>                      <option value="sans-serif">sans-serif</option>                      <option value="cursive">cursive</option>                      <option value="fantasy">fantasy</option>                      <option value="monospace">monospace</option>                  </select>                  <br />                  Text Size:                  <input type="range" id="textSize" min="0" max="200" step="1" value="50" />                  <br>                  Text Baseline                  <select id="textBaseline">                      <option value="middle">middle</option>                      <option value="top">top</option>                      <option value="hanging">hanging</option>                      <option value="alphabetic">alphabetic</option>                      <option value="ideographic">ideographic</option>                      <option value="bottom">bottom</option>                  </select>                  <br>                  Text Align                  <select id="textAlign">                      <option value="center">center</option>                      <option value="start">start</option>                      <option value="end">end</option>                      <option value="left">left</option>                      <option value="right">right</option>                  </select>                  <br>                  Alpha:<input type="range" id="textAlpha" min="0" max="1" step="0.1" value="1" />                  <br>                  Shadow X:<input type="range" id="shadowX" min="-100" max="100" step="1" value="1" />                  <br>                  Shadow Y:<input type="range" id="shadowY" min="-100" max="100" step="1" value="1" />                  <br>                  Shadow Blur:<input type="range" id="shadowBlur" min="1" max="100" step="1" value="1" />                  <br>                  Shadow Color:<input  id="shadowColor" value="#000000" />              </form>          </div>      </body>  </html>

 


相关文章