html5 canvas 笔记三（绘制文本和图片）

时间：2022-02-03 04:30:09

绘制文本

  • fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
  • strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

实例：

 function draw() {

   var ctx = document.getElementById('canvas').getContext('2d');

   ctx.font = "48px serif";

   ctx.fillText("Hello world", 10, 50);

   ctx.strokeText("Hello world", 10, 250);

 }

设置文本样式

  • font = value    当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif.
  • textAlign = value   文本对齐选项. 可选的值包括: start, end, left, right or center. 默认值是 start.
  • textBaseline = value    基线对齐选项. 可选的值包括: top, hanging, middle, alphabetic, ideographic, bottom. 默认值是 alphabetic.
  • direction = value   文本方向. 可能的值包括: ltr, rtl, inherit. 默认值是 inherit.

文本测量

  • measureText()　　将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性

实例：获取文本宽度

 function draw() {

   var ctx = document.getElementById('canvas').getContext('2d');

   var text = ctx.measureText("foo"); // TextMetrics object

   text.width; // 16;

 }

绘制图片

引入图像到canvas里需要以下两步基本操作：

  1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
  2. 使用drawImage()函数将图片绘制到画布上

１＞使用相同页面内的图片

  • document.images集合
  • document.getElementsByTagName()方法
  • 如果你知道你想使用的指定图片的ID，你可以用document.getElementById()获得这个图片

２＞由零开始创建图像

 var img = new Image();   // 创建img元素

 img.onload = function(){

   // 执行drawImage语句

 }

 img.src = 'myImage.png'; // 设置图片源地址

注意：若调用 drawImage 时，图片没装载完，那什么都不会发生，因此你应该用load时间来保证不会在加载完毕之前使用这个图片．

绘制图片

  • drawImage(image, x, y)　　其中image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

实例：

 function draw() {

     var ctx = document.getElementById('canvas').getContext('2d');

     var img = new Image();

     img.onload = function(){

       ctx.drawImage(img,0,0);

       ctx.beginPath();

       ctx.moveTo(30,96);

       ctx.lineTo(70,66);

       ctx.lineTo(103,76);

       ctx.lineTo(170,15);

       ctx.stroke();

     }

     img.src = 'images/backdrop.png';

   }

缩放 Scaling

  • drawImage(image, x, y, width, height)

切片 Slicing

  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

相关文章