Canvas简介
HTML5新增标签
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。
<canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。
提示：如果希望学习如何使用 <canvas> 来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进， <canvas> 已经成为 HTML 5 草案中一个正式的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
图片在canvas中显示，给canvas添加文字，文字描边，将canvas保存成图片下载到本地
</title>
</head>
<body>
<div>
<canvas id="canvas" width="1280" height="720"></canvas>
</div>
<script>
// base64转Blob对象
const base64ToBlob = (code) => {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uint8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i)
}
return new Blob([uint8Array], { type: contentType })
}
const download = (dataUrl, fileName) => {
let aLink = document.createElement('a')
let blob = base64ToBlob(dataUrl)
let event = document.createEvent('HTMLEvents')
event.initEvent('click', true, true)
aLink.download = fileName + '.' + blob.type.split('/')[1]
aLink.href = URL.createObjectURL(blob)
aLink.click()
}
const init = () => {
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let image = new Image()
image.crossOrigin = 'anonymous'
//image.src = './1280.png'
image.src =
'http://localhost:85/video/grade1/chinese1-img/%E6%88%AA%E5%9B%BE%20(1).png?time=1662633780355'
image.onload = function () {
ctx.drawImage(image, 1, 1)
ctx.lineWidth = 5
ctx.font = '40px Verdana'
let title = '10【汉语拼音】第7课、第8课：z c s 和zh ch sh r'
let tempTitleArr = []
for (let i = 0; i < title.length; i = i + 16) {
let tempTitle = title.slice(i, i + 16)
tempTitleArr.push(tempTitle)
}
if (
tempTitleArr.length > 2 &&
tempTitleArr[tempTitleArr.length - 1].length < 8
) {
tempTitleArr[tempTitleArr.length - 2] =
tempTitleArr[tempTitleArr.length - 2] +
tempTitleArr[tempTitleArr.length - 1]
tempTitleArr.splice(tempTitleArr.length - 1, 1)
}
console.log(tempTitleArr)
tempTitleArr.forEach((item, index) => {
ctx.strokeStyle = '#ff3333'
ctx.strokeText(item, 10, 100 * (index + 1))
ctx.fillStyle = '#ffff00'
ctx.fillText(item, 10, 100 * (index + 1))
})
const dataUrl = canvas.toDataURL('image/png')
console.log(dataUrl)
download(dataUrl, '截图')
}
}
init()
</script>
</body>
</html>
