插入文本
在繪圖的過程中經常需要插入一些文本內容，在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>
