目录
项目起步
实现功能
完整代码
效果图如下
项目总计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 = falselet lineWidth = 10//连接处圆润ctx.lineJoin = 'round'//开头和结尾圆润ctx.lineCap = 'round'c1.onmousedown = function () {ctx.beginPath()let x = event.pageXlet y = event.pageYctx.moveTo(x, y)isDraw = true}c1.onmouseup = function () {isDraw = falsectx.closePath()}c1.onmouseleave = function () {isDraw = falsectx.closePath()}c1.onmousemove = function () {if (isDraw) {let x = event.pageXlet y = event.pageYctx.lineTo(x, y)ctx.lineWidth = lineWidthctx.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 = imgUrla.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 = falselet lineWidth = 10//连接处圆润ctx.lineJoin = 'round'//开头和结尾圆润ctx.lineCap = 'round'c1.onmousedown = function () {ctx.beginPath()let x = event.pageXlet y = event.pageYctx.moveTo(x, y)isDraw = true}c1.onmouseup = function () {isDraw = falsectx.closePath()}c1.onmouseleave = function () {isDraw = falsectx.closePath()}c1.onmousemove = function () {if (isDraw) {let x = event.pageXlet y = event.pageYctx.lineTo(x, y)ctx.lineWidth = lineWidthctx.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 = imgUrla.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>
