插入文本
在繪圖的過(guò)程中經(jīng)常需要插入一些文本內(nèi)容，在CanvasRenderingContext2D中可以使用下面的方法來(lái)插入：
- fillText(text,x,y[,maxWidth]):實(shí)心文本
- strokeText(text,x,y[,maxWidth]):空心wenb
相關(guān)屬性： - font: 字體
- textAlign：排列方式,可選值[start, end, left, right, center]
- direction: 文本方向
- textBaseline: 文本的基線，漢字用不到，值為top,hanging,middle,alphabetic,ideographic,bottom.
實(shí)例：
<!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('愛(ài)我中華', 10, 50);
ctx.font = '38px 宋體';
ctx.strokeText('中國(guó)加油', 10, 100);
}
</script>
</body>
</html>
運(yùn)行結(jié)果
插入圖片
在CanvasRenderingContext2D中可以插入圖片，使用drawImage方法，有以下三種調(diào)用方式：
- drawImage(image, x, y)
指定圖片繪制位置的左上角 - drawImage(image,x,y,width,height)
指定繪制后的寬和高，這個(gè)方法可能會(huì)產(chǎn)生變形 - drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
可以截取原圖的一部分繪制到當(dāng)前canvas中，并且可以進(jìn)行縮放，它的后8個(gè)參數(shù)中的前4個(gè)表示在原圖中要截取得位置，sx,sy為截取的左上角的位置，sWidth和sHeight為截取的寬度和高度，后4個(gè)參數(shù)表示在當(dāng)前canvas中繪制的位置，dx，dy為繪制的左上角，dWidth和dHeight為繪制的寬度和高度。
參數(shù)中，image為CanvasImageSource類(lèi)型，可以是html中的img節(jié)點(diǎn)、video節(jié)點(diǎn)、canvas節(jié)點(diǎn)或者Canvas'RenderingContext2D對(duì)象。
實(shí)例：
<!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>
運(yùn)行結(jié)果
