2025年使用canvas制作在线涂鸦画板

科技前沿 • 2025-01-11 23:23 • 阅读 72

大家好，我是讯享网，很高兴认识大家。

介绍

点击预览：在线涂鸦画板
项目源码：github地址

主要功能

调节笔颜色

点击黑色，将画笔颜色改为黑色，并且加上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() }