Canvas（三）绘制文本、使用图像
参考
绘制文本 - Web API 接口参考 | MDN
绘制文本
绘制文本
canvas 提供了两种方法来渲染文本:
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.strokeText("Hello world", 10, 50);
}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 objecttext.width; // 16;
}使用图像
浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到canvas里需要以下两步基本操作：
1、获取需要绘制的图片
canvas的API可以使用下面这些类型中的一种作为图片的源：
HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的元素
HTMLVideoElement
用一个HTML的
HTMLCanvasElement
可以使用另一个
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
这些源统一由 CanvasImageSource类型来引用。
使用相同页面内的图片
我们可以通过下列方法的一种来获得与canvas相同页面内的图片的引用：
- document.images集合
- document.getElementsByTagName()方法
- 如果你知道你想使用的指定图片的ID，你可以用document.getElementById()获得这个图片
使用其它域名下的图片
在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas。
使用其它 canvas 元素
和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。
一个常用的应用就是将第二个canvas作为另一个大的 canvas 的缩略图。
使用Image()转载图像
var img = new Image(); // 创建一个![]()
元素
img.src = 'myImage.png'; // 设置图片源地址当脚本执行后，图片开始装载。
若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用load事件来保证不会在加载完毕之前使用这个图片：
var img = new Image(); // 创建img元素
img.onload = function(){// 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址使用data:url嵌入图象
img.src = 'data:image/gif;base64,R0l'缺点是图象无法缓存。
使用视频帧
你还可以使用
function getMyVideo() {var canvas = document.getElementById('canvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');return document.getElementById('myvideo');}
}它将为这个视频返回HTMLVideoElement对象，正如我们前面提到的，它可以作为我们的Canvas图片源。
2、使用deawImage()绘制图片
drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。
drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
SVG图像必须在
一个例子：
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 = 'https://mdn.mozillademos.org/files/5395/backdrop.png';}
缩放：
drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
切片：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
解释：前4个参数是定义在原图上的切片位置，后四个是canvas的摆放位置。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！