mouse

事件。

下面就实现了一个简单的画板#xff0c;实际效果如下#xff1a;

在页面中#xff0c;有文字、按钮#xff0c;有包裹进度条的块。

有如下需求实际效果如下

目前已经实现了第一个需求您可以点击这里简单画板-进度条不能画线

!DOCTYPE

initial-scale1.0title简单画板-进度条不能画线/titlestyle*

{margin:0;padding:

10px;}.btn_wrap.process{position:

relative;cursor:

idcanvas/canvasdivp故乡的春天是我今生的起点故乡的月亮又是故乡春天的起点正因为如此我此生是以故乡月亮行走的方式行走于世界之中从故乡的泥土上走出来的人们就算身处异乡举头望月那月亮始终是故乡春天那轮月亮的颜色无法改变那样的云彩陪伴着那样皎洁的月色生长着一点点忧伤荡漾着一缕缕思念……/pp在缺少蝈蝈叫声的春天夜里天边那一弯月牙呢你是谁呀是陌生又熟悉的你吗怎么春天总在你清澈的眼神中行走当你灿烂的笑容递过来的时刻燕子的剪影在麻雀的叫声里飘舞似那一缕轻梦总能轻轻唤醒春风。

当我懂得人世间最初感情的时刻你就挂在春天的树梢上直到今朝依然挂在我寂寞的窗口。

妻子的月亮受不了春天潇洒的风寒躲在家的怀里不肯出门而你却伸出那只忘情的小手推窗而入悄悄走进我的心田。

在这样的春天许多故事入梦了但是关于你的记忆在漫天飞翔。

那是多么撩人的画面我深陷得不能自己绵绵恙笛老是陪伴缕缕月色定格于窗户的画框里无需要春风给力我能够很快发现了你我的思念与牵挂一次次验证了我对你的虔诚。

虽然直到今天你还是你我还是我在亲密的间隙里夹着少许陌生但是依旧改不了那缱绻的味道。

不要怀疑我是否是青铜器古董就古董在春风门前我算不得高雅但是也不会作贱自己否则就没有勇气面对八面来风的春天和春天玲珑剔透的明月了。

/pp春天的月亮的是有心思的深得让人可以跋涉一辈子月亮的心思只有月亮知道但是人的心思月亮一定知道否则她怎么能那样善解人意跟着人的感觉走进人的灵魂深处你看你看啦故乡春天的月亮行走着行走着一不小心就出轨了掉进故乡清澈的小河里。

我不知道你是不是以出轨的样儿走进我的空间的成为我忐忑的期盼但是毋容置疑你已经活在我的天空里了不知我是否也能走进你的家园里我一直坚定的认为一个人能活在另一个人的心坎里这是多么多么幸福的事情。

/pp妻子是土生土长的故乡人如春天那一轮满月总是勤勤恳恳挂在家的中央穿着花围裙老在厨房奏响锅碗瓢盆交响曲在洗衣机旁唱响洗衣歌用纯朴燃烧自己默默地用爱呵护、坚守、保卫自己的地盘。

随着时间的荏苒我很少端详她认真的模样只是每天清早梳洗打扮一番真的特靓堪称精品女人但是每天下班回家却是灰头土脸。

我戏曰“老婆你每天打扮得那靓是给别人看的每天交给我的是一个次品女人。

”“那是为你撑面子呗我的坏蛋蛋”老婆有意无意笑嘻嘻的说。

我知道那里头藏着的东西叫生活叫日子。

一个女人敢把最丑的一面展现在男人面前那她早就把灵魂交付给了那男人保管了。

在妻子的劳动中翻开了家的崭新的一页而妻子面对春天报以憨厚一笑就如春天那一轮清澈满月但是幸福就是在那一刻简单开始了……/pdiv

classpz

big-buttom大按钮/button/divdivbutton

classdiv_btn

max100/progress/div/divscriptconst

canvasEl

document.querySelector(#canvas)//

画板全屏const

document.documentElement.clientWidth;const

pageHeight

document.documentElement.clientHeight;canvasEl.width

pageHeight;const

canvasEl.getContext(2d)ctx.lineWidth

4ctx.lineJoin

{m.preventDefault();[...m.changedTouches].forEach(item

{const

{ctx.beginPath()ctx.moveTo(current.x,

current.y)ctx.lineTo(item.clientX,

cb(current,

{m.preventDefault();[...m.changedTouches].forEach(item

{touchArr.push(handleCopy(item))})}const

touchMove

touchArr.splice(touchArr.findIndex(v

v.id

touchArr.splice(touchArr.findIndex(v

v.id

returnctx.beginPath()ctx.moveTo(activeMouse.x,

activeMouse.y)ctx.lineTo(e.clientX,

e.clientY)ctx.stroke()activeMouse

e.clientX,

{}}canvasEl.addEventListener(touchstart,

touchStart)canvasEl.addEventListener(touchmove,

touchMove)canvasEl.addEventListener(touchend,

touchEnd)canvasEl.addEventListener(mousedown,

mouseStart)canvasEl.addEventListener(mousemove,

mouseMove)canvasEl.addEventListener(mouseup,

mouseEnd)/script

/html要想在画板中能点击按钮和块那么可点击的内容一定要比画板的层级高按钮这种占据面积小的元素对于画笔的影响不大可轻松穿过。

而且线条能在div

div

此时进度条块的层级比画板层级高画笔无法在进度条块上作画只能在进度条块的两端横穿而过画笔自动补全中间缺失的部分操作如下

分析如下针对PC端

mousedown、mousemove、mouseup这三种事件当画笔出现在层级较画板高的进度条块上时这三种事件无法触发线条就画不出来了。

那么在进度条块上添加这3种事件就可以无缝连接作画了。

!DOCTYPE

initial-scale1.0title简单画板-进度条可以画线-文字图片/titlestyle*

{margin:0;padding:

10px;}.btn-wrap.progress{cursor:

2px

border-box;}.img-wrap{text-align:

center;}/style

idcanvas/canvasdivp故乡的春天是我今生的起点故乡的月亮又是故乡春天的起点正因为如此我此生是以故乡月亮行走的方式行走于世界之中从故乡的泥土上走出来的人们就算身处异乡举头望月那月亮始终是故乡春天那轮月亮的颜色无法改变那样的云彩陪伴着那样皎洁的月色生长着一点点忧伤荡漾着一缕缕思念……/pp春天的月亮的是有心思的深得让人可以跋涉一辈子月亮的心思只有月亮知道但是人的心思月亮一定知道否则她怎么能那样善解人意跟着人的感觉走进人的灵魂深处你看你看啦故乡春天的月亮行走着行走着一不小心就出轨了掉进故乡清澈的小河里。

我不知道你是不是以出轨的样儿走进我的空间的成为我忐忑的期盼但是毋容置疑你已经活在我的天空里了不知我是否也能走进你的家园里我一直坚定的认为一个人能活在另一个人的心坎里这是多么多么幸福的事情。

/pp妻子是土生土长的故乡人如春天那一轮满月总是勤勤恳恳挂在家的中央穿着花围裙老在厨房奏响锅碗瓢盆交响曲在洗衣机旁唱响洗衣歌用纯朴燃烧自己默默地用爱呵护、坚守、保卫自己的地盘。

随着时间的荏苒我很少端详她认真的模样只是每天清早梳洗打扮一番真的特靓堪称精品女人但是每天下班回家却是灰头土脸。

我戏曰“老婆你每天打扮得那靓是给别人看的每天交给我的是一个次品女人。

”“那是为你撑面子呗我的坏蛋蛋”老婆有意无意笑嘻嘻的说。

我知道那里头藏着的东西叫生活叫日子。

一个女人敢把最丑的一面展现在男人面前那她早就把灵魂交付给了那男人保管了。

在妻子的劳动中翻开了家的崭新的一页而妻子面对春天报以憨厚一笑就如春天那一轮清澈满月但是幸福就是在那一刻简单开始了……/pdiv

classpz

idb-buttom大按钮/button/divdivbutton

classpz

srcdata:image/jpeg;base64,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***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

canvasEl

document.querySelector(#canvas)const

progressWrapEl

document.querySelector(#progress-wrap)const

bButtomEl

document.querySelector(#b-buttom)const

sButtomEl

document.querySelector(#s-buttom)const

dButtomEl

document.querySelector(#d-buttom)//

画板全屏const

document.documentElement.clientWidth;const

pageHeight

document.documentElement.clientHeight;canvasEl.width

pageHeight;const

canvasEl.getContext(2d)ctx.lineWidth

4ctx.lineJoin

{m.preventDefault();[...m.changedTouches].forEach(item

{const

{ctx.beginPath()ctx.moveTo(current.x,

current.y)ctx.lineTo(item.clientX,

cb(current,

{m.preventDefault();[...m.changedTouches].forEach(item

{touchArr.push(handleCopy(item))})}const

touchMove

touchArr.splice(touchArr.findIndex(v

v.id

touchArr.splice(touchArr.findIndex(v

v.id

returnctx.beginPath()ctx.moveTo(activeMouse.x,

activeMouse.y)ctx.lineTo(e.clientX,

e.clientY)ctx.stroke()activeMouse

e.clientX,

{}}canvasEl.addEventListener(touchstart,

touchStart)canvasEl.addEventListener(touchmove,

touchMove)canvasEl.addEventListener(touchend,

touchEnd)canvasEl.addEventListener(mousedown,

mouseStart)canvasEl.addEventListener(mousemove,

mouseMove)canvasEl.addEventListener(mouseup,

mouseEnd)progressWrapEl.addEventListener(touchstart,

touchStart)progressWrapEl.addEventListener(touchmove,

touchMove)progressWrapEl.addEventListener(touchend,

touchEnd)progressWrapEl.addEventListener(mousedown,

mouseStart)progressWrapEl.addEventListener(mousemove,

mouseMove)progressWrapEl.addEventListener(mouseup,

mouseEnd)progressWrapEl.addEventListener(click,

{alert(点击了进度条块)})bButtomEl.addEventListener(click,

{alert(点击了大按钮)})sButtomEl.addEventListener(click,

{alert(点击了小按钮)})dButtomEl.addEventListener(click,

/body