项目起步

首先准备好项目所用到的元素

 <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>

用canvas实现在线画板,带你找回童年乐趣相关推荐

【微信小程序】使用canvas制作在线画板，清除与保存
参考:微信小程序实现在线画板https://blog.csdn.net/IT_czh/article/details/84623110 wxml  < ...
使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
canvas制作在线画板
上效果图 <template><canvas ref="canvas" class="canvas" width="800" ...
python canvas画弧度_Python带你找回童年的万花尺
还记得小时候的万花尺吧?这么画: 一点也不费脑筋,就可以出来这么多丰富多彩的复杂几何图形. 具体而言,可以用万花尺玩具(如图2-1所示)来绘制数学曲线.这种玩具由两个不同尺寸的塑料齿轮组成,一大一小. ...
JS底层实现canvas在线画板
本篇文章作为初学者角度编写连接:码云开源地址:http://exeup.gitee.io/watercolor-online/ 相信画板这类应用大家都不陌生, 感觉接触计算机不多久就接触到了 ...
找回童年乐趣，在线玩超级玛丽、冒险岛、魂斗罗、坦克大战等经典游戏
苏生不惑第252篇原创文章,将本公众号设为星标,第一时间看最新文章. 下周就是六一了,分享几个能让你找回童年乐趣的在线游戏. 怀旧游戏机在线小霸王游戏机,威力无穷http://god.fhjo.cn ...
手把手教你实现一个canvas智绘画板
手把手教你实现一个canvas智绘画板下载地址前言本文主要介绍: 项目介绍项目效果展示一步步实现项目效果踩坑一.项目介绍名称: 智绘画板技术栈: HTML5,CSS3,JavaScr ...
HTML5移动开发之路（7）——在线画板
在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示: 过程很简单直接上代码了: <!DOCTYPE html PUBLI ...
小强的HTML5移动开发之路（10）——在线画板
在这一篇文章中我们用html5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示: 过程很简单直接上代码了: <!DOCTYPE html PUBLI ...

用canvas实现在线画板,带你找回童年乐趣

项目起步

实现功能

完整代码

用canvas实现在线画板,带你找回童年乐趣相关推荐

最新文章

热门文章