插入文本
在绘图的过程中经常需要插入一些文本内容，在CanvasRenderingContext2D中可以使用下面的方法来插入：
- fillText(text,x,y[,maxWidth]):实心文本
- strokeText(text,x,y[,maxWidth]):空心wenb
相关属性： - font: 字体
- textAlign：排列方式,可选值[start, end, left, right, center]
- direction: 文本方向
- textBaseline: 文本的基线，汉字用不到，值为top,hanging,middle,alphabetic,ideographic,bottom.
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="c2d">浏览器不支持canvas</canvas>
<script>
const canvas = document.querySelector('#c2d');
if(canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.font='28px 行楷';
ctx.fillText('爱我中华', 10, 50);
ctx.font = '38px 宋体';
ctx.strokeText('中国加油', 10, 100);
}
</script>
</body>
</html>
运行结果
插入图片
在CanvasRenderingContext2D中可以插入图片，使用drawImage方法，有以下三种调用方式：
- drawImage(image, x, y)
指定图片绘制位置的左上角 - drawImage(image,x,y,width,height)
指定绘制后的宽和高，这个方法可能会产生变形 - drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
可以截取原图的一部分绘制到当前canvas中，并且可以进行缩放，它的后8个参数中的前4个表示在原图中要截取得位置，sx,sy为截取的左上角的位置，sWidth和sHeight为截取的宽度和高度，后4个参数表示在当前canvas中绘制的位置，dx，dy为绘制的左上角，dWidth和dHeight为绘制的宽度和高度。
参数中，image为CanvasImageSource类型，可以是html中的img节点、video节点、canvas节点或者Canvas'RenderingContext2D对象。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="c2d" width="800" height="800">浏览器不支持canvas</canvas>
<img id="pic" src="./img/Pic2.png" hidden="true">
<script>
window.onload = function () {
const canvas = document.querySelector('#c2d');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
const pic = document.getElementById('pic');
ctx.drawImage(pic, 0, 0, 100, 100);
ctx.drawImage(pic, 50, 50, 100, 100);
ctx.drawImage(pic, 100, 100, 100, 100);
}
}
</script>
</body>
</html>
运行结果
网友评论