本文已参与「新人创作礼」活动,一起开启掘金创作之路
介绍
主要功能
调节笔颜色
点击黑色,将画笔颜色改为黑色,并且加上active类,其他颜色删除active,实现点击处高亮。
black.onclick = function () {
context.strokeStyle = 'black'
for (var i = 0; i < black.parentNode.children.length; i++) {
black.parentNode.children[i].classList.remove('active')
}
black.classList.add('active')
}
调节笔粗细
点击第一个按钮,将画笔width改为3,并且加上active类,其他删除active,实现点击处高亮。
one.onclick = function () {
lineWidth = 3;
for (var i = 0; i < one.parentNode.children.length; i++) {
one.parentNode.children[i].classList.remove('active')
}
one.classList.add('active')
}
清空画板
使用clearRect属性清空画板
clear.onclick = function () {
context.clearRect(0, 0, yyy.width, yyy.height)
}
返回上一步
先定义一个数组canvasHistory,在鼠标松开的时候将本次保存到canvasHistory中,点击返回时将画板清空然后将上一步画板信息在canvas中画出。
主要属性
- getImageData
返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。 - putImageData
将图像数据(从指定的 ImageData 对象)放回画布上。
canvas.ontouchend = function () {
step++;
canvasHistory.push(context.getImageData(0, 0, yyy.width, yyy.height))
}
cancel.onclick = function () {
if (step >= 0) {
step--;
context.clearRect(0, 0, yyy.width, yyy.height)
context.putImageData(canvasHistory[step], 0, 0)
console.log(step, context)
} else {
console.log('不能再继续撤销了');
}
}
保存下载
将画板图案用toDataURL属性产生URL,在body创建a元素设置其href和download属性,并点击a元素开始下载
主要属性
- toDataURL
返回一个包含图片展示的 data URI - download
该属性设置一个值来规定下载文件的名称 - target
标签的 target 属性规定在何处打开链接文档。
_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。
save.onclick = function () {
var url = yyy.toDataURL('image/png')
var a = document.createElement('a')
document.body.appendChild(a)
a.href = url
a.download = '我的画板'
a.target = '_blank'
a.click()
}