效果图如下
项目总计6大功能
项目起步
首先准备好项目所用到的元素
<canvas id="c1" width="1000" height="400"></canvas> <hr> <button id="strong">粗线条</button> <button id="thin">细线条</button> <button id="save">保存签名</button> <input type="color" id="color" value=""> <button id="clearBtn">橡皮擦</button> <button id="null">清空画布</button> /** * @type {HTMLCanvasElement} */ const c1 = document.querySelector('#c1') const ctx = c1.getContext('2d') let isDraw = false let lineWidth = 10 //连接处圆润 ctx.lineJoin = 'round' //开头和结尾圆润 ctx.lineCap = 'round' c1.onmousedown = function () { ctx.beginPath() let x = event.pageX let y = event.pageY ctx.moveTo(x, y) isDraw = true } c1.onmouseup = function () { isDraw = false ctx.closePath() } c1.onmouseleave = function () { isDraw = false ctx.closePath() } c1.onmousemove = function () { if (isDraw) { let x = event.pageX let y = event.pageY ctx.lineTo(x, y) ctx.lineWidth = lineWidth ctx.stroke() } }
通过监听鼠标事件，我们可以在canvas元素中绘制出我们想要的效果
实现功能
1.线段的粗细
改变的是线条的粗细，根据 lineWidth调整即可
2.橡皮擦功能
当我们再擦除的时候，其实是利用的是合成属性,让合成的部分隐藏起来
注意擦除后，我们再绘制的时候需要让元素显示出来需要设置source-over
ctx.globalCompositeOperation = 'destination-out'
3.清除画布
利用clearRect 即可清除想要清除的画布区域
ctx.clearRect(0,0, 1000, 400)
4.颜色改变
我们读取取色器的value然后赋值给strokeStyle即可
ctx.strokeStyle = color.value
5.保存签名
这一步我们可以将画好的画布下载下来
利用画布的toDataURL属性,将其转化成一个url, 接着让一个a标签的href指向其，添加download属性即可
const imgUrl = c1.toDataURL() let a = document.createElement('a') a.setAttribute('download', '酷炫前面') a.href = imgUrl a.click()
一起来看看最终效果
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active { border: 1px solid #ffcccc; background-color: #ffcccc; color: white; } </style> </head> <body> <canvas id="c1" width="1000" height="400"></canvas> <hr> <button id="strong">粗线条</button> <button id="thin">细线条</button> <button id="save">保存签名</button> <input type="color" id="color" value=""> <button id="clearBtn">橡皮擦</button> <button id="null">清空画布</button> <script> /** * @type {HTMLCanvasElement} */ const c1 = document.querySelector('#c1') const ctx = c1.getContext('2d') let isDraw = false let lineWidth = 10 //连接处圆润 ctx.lineJoin = 'round' //开头和结尾圆润 ctx.lineCap = 'round' c1.onmousedown = function () { ctx.beginPath() let x = event.pageX let y = event.pageY ctx.moveTo(x, y) isDraw = true } c1.onmouseup = function () { isDraw = false ctx.closePath() } c1.onmouseleave = function () { isDraw = false ctx.closePath() } c1.onmousemove = function () { if (isDraw) { let x = event.pageX let y = event.pageY ctx.lineTo(x, y) ctx.lineWidth = lineWidth ctx.stroke() } } const strong = document.querySelector('#strong') strong.onclick = function () { ctx.globalCompositeOperation = 'source-over' strong.classList.add('active') thin.classList.remove('active') clearBtn.classList.remove('active') lineWidth = 20 } const thin = document.querySelector('#thin') thin.onclick = function () { ctx.globalCompositeOperation = 'source-over' thin.classList.add('active') strong.classList.remove('active') clearBtn.classList.remove('active') lineWidth = 2 } const save = document.querySelector('#save') //保存图片 save.onclick = function () { const imgUrl = c1.toDataURL() let a = document.createElement('a') a.setAttribute('download', '酷炫前面') a.href = imgUrl a.click() } const color = document.querySelector('#color') color.onchange = function () { ctx.strokeStyle = color.value } const clearBtn = document.querySelector('#clearBtn') clearBtn.onclick = function () { clearBtn.classList.add('active') thin.classList.remove('active') strong.classList.remove('active') ctx.globalCompositeOperation = 'destination-out' lineWidth = 50 } const nullCanvas = document.querySelector('#null') nullCanvas.onclick = function () { ctx.clearRect(0, 0, 1000, 400) } </script> </body> </html>
