做茶道网站,嘉兴制作网站,苏州三石网络科技有限公司,网站建设开发文档提示#xff1a;canvas画线 文章目录 前言一、带透明度的线二、试错#xff0c;只有lineTo的时候画#xff0c;只有最后地方是透明度的三、试错#xff0c;只存上一次的点#xff0c;线会出现断裂的情况总结 前言
一、带透明度的线
test.html
!DOCTYPE html
canvas画线 文章目录 前言一、带透明度的线二、试错只有lineTo的时候画只有最后地方是透明度的三、试错只存上一次的点线会出现断裂的情况总结 前言
一、带透明度的线
test.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlecanvas跟随鼠标移动画透明线/titlestylediv,canvas,img{user-select: none;}.my_canvas,.bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}.bg_img{width: 674px;height: 495px;background: #ddd;}/style
/head
bodydiv classbg_img/divcanvas idmyCanvasBot classmy_canvas width674 height495/canvascanvas idmyCanvasTop classmy_canvas width674 height495/canvasscriptconst canvasWidth 674;const canvasHeight 495;//底层canvasconst botCan document.getElementById(myCanvasBot);//顶层canvasconst topCan document.getElementById(myCanvasTop);//底层画布const botCtx botCan.getContext(2d);//顶层画布const topCtx topCan.getContext(2d);//鼠标是否按下 是否移动 是否画图了let isDown false,isMove false,isDrawed false;//需要画图的轨迹let drawPoints [];//起始点x,ylet startPoint {x:0,y:0};//图片历史let imgHistory [];//icon历史let partHistory [];//鼠标按下const mousedown (e){isDown true;let x (e||window.event).offsetX;let y (e||window.event).offsetY;startPoint {x,y}// drawPoints.push({x,y});drawPoints.push([{x,y}]);topCtx.beginPath();topCtx.moveTo(x,y);}//鼠标移动const mousemove (e){if(isDown){isMove true;drawCurve(e);}}//鼠标抬起const mouseup (e){if(isDownisMove){isDown false;isMove false;drawPoints [];//把topCan画布生成图片let img new Image();img.src topCan.toDataURL(image/png);img.onload (){partHistory.push(img);//添加到botCtx画布botCtx.drawImage(img,0,0);let historyImg new Image();historyImg botCan.toDataURL(image/png);historyImg.onload (){//添加到历史记录imgHistory.push(historyImg);}//清除topCtx画布topCtx.clearRect(0,0,canvasWidth,canvasHeight);}}}//画带透明度涂鸦const drawCurve (e){let x (e||window.event).offsetX;let y (e||window.event).offsetY;drawPoints.push({x,y});topCtx.strokeStyle rgba(255,0,0,0.2);topCtx.lineWidth 10;//清空当前画布内容topCtx.clearRect(0,0,canvasWidth,canvasHeight);//必须每次都beginPath 不然会卡topCtx.beginPath();topCtx.moveTo(drawPoints[0].x,drawPoints[0].y);for(let i1;idrawPoints.length;i){topCtx.lineTo(drawPoints[i].x,drawPoints[i].y);}topCtx.stroke();}//canvas添加鼠标事件topCan.addEventListener(mousedown,mousedown);topCan.addEventListener(mousemove,mousemove);topCan.addEventListener(mouseup,mouseup);//全局添加鼠标抬起事件document.addEventListener(mouseup,(){isDown false;isMove false;isDrawed false;});/script
/body
/html二、试错只有lineTo的时候画只有最后地方是透明度的
test.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlecanvas跟随鼠标移动画透明线/titlestylediv,canvas,img{user-select: none;}.my_canvas,.bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}.bg_img{width: 674px;height: 495px;background: #ddd;}/style
/head
bodydiv classbg_img/divcanvas idmyCanvasBot classmy_canvas width674 height495/canvascanvas idmyCanvasTop classmy_canvas width674 height495/canvasscriptconst canvasWidth 674;const canvasHeight 495;//底层canvasconst botCan document.getElementById(myCanvasBot);//顶层canvasconst topCan document.getElementById(myCanvasTop);//底层画布const botCtx botCan.getContext(2d);//顶层画布const topCtx topCan.getContext(2d);//鼠标是否按下 是否移动 是否画图了let isDown false,isMove false,isDrawed false;//需要画图的轨迹let drawPoints [];//起始点x,ylet startPoint {x:0,y:0};//图片历史let imgHistory [];//icon历史let partHistory [];//鼠标按下const mousedown (e){isDown true;let x (e||window.event).offsetX;let y (e||window.event).offsetY;startPoint {x,y}// drawPoints.push({x,y});drawPoints.push([{x,y}]);topCtx.beginPath();topCtx.moveTo(x,y);}//鼠标移动const mousemove (e){if(isDown){isMove true;drawCurve(e);}}//鼠标抬起const mouseup (e){if(isDownisMove){isDown false;isMove false;drawPoints [];//把topCan画布生成图片let img new Image();img.src topCan.toDataURL(image/png);img.onload (){partHistory.push(img);//添加到botCtx画布botCtx.drawImage(img,0,0);let historyImg new Image();historyImg botCan.toDataURL(image/png);historyImg.onload (){//添加到历史记录imgHistory.push(historyImg);}//清除topCtx画布topCtx.clearRect(0,0,canvasWidth,canvasHeight);}}}//画带透明度涂鸦const drawCurve (e){let x (e||window.event).offsetX;let y (e||window.event).offsetY;drawPoints.push({x,y});topCtx.strokeStyle rgba(255,0,0,0.2);topCtx.lineWidth 10;//清空当前画布内容// topCtx.clearRect(0,0,canvasWidth,canvasHeight);//必须每次都beginPath 不然会卡// topCtx.beginPath();// topCtx.moveTo(drawPoints[0].x,drawPoints[0].y);// for(let i1;idrawPoints.length;i){// topCtx.lineTo(drawPoints[i].x,drawPoints[i].y);// }topCtx.lineTo(x,y);topCtx.stroke();}//canvas添加鼠标事件topCan.addEventListener(mousedown,mousedown);topCan.addEventListener(mousemove,mousemove);topCan.addEventListener(mouseup,mouseup);//全局添加鼠标抬起事件document.addEventListener(mouseup,(){isDown false;isMove false;isDrawed false;});/script
/body
/html三、试错只存上一次的点线会出现断裂的情况
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlecanvas跟随鼠标移动画透明线/titlestylediv,canvas,img{user-select: none;}.my_canvas,.bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}.bg_img{width: 674px;height: 495px;background: #ddd;}/style
/head
bodydiv classbg_img/divcanvas idmyCanvasBot classmy_canvas width674 height495/canvascanvas idmyCanvasTop classmy_canvas width674 height495/canvasscriptconst canvasWidth 674;const canvasHeight 495;//底层canvasconst botCan document.getElementById(myCanvasBot);//顶层canvasconst topCan document.getElementById(myCanvasTop);//底层画布const botCtx botCan.getContext(2d);//顶层画布const topCtx topCan.getContext(2d);//鼠标是否按下 是否移动 是否画图了let isDown false,isMove false,isDrawed false;//需要画图的轨迹let drawPoints [];//起始点x,ylet startPoint {x:0,y:0};//上一次的点let lastPoint {x:0,y:0};//图片历史let imgHistory [];//icon历史let partHistory [];//鼠标按下const mousedown (e){isDown true;let x (e||window.event).offsetX;let y (e||window.event).offsetY;startPoint {x,y}// drawPoints.push({x,y});drawPoints.push([{x,y}]);lastPoint {x,y}topCtx.beginPath();topCtx.moveTo(x,y);}//鼠标移动const mousemove (e){if(isDown){isMove true;drawCurve(e);}}//鼠标抬起const mouseup (e){if(isDownisMove){isDown false;isMove false;drawPoints [];//把topCan画布生成图片let img new Image();img.src topCan.toDataURL(image/png);img.onload (){partHistory.push(img);//添加到botCtx画布botCtx.drawImage(img,0,0);let historyImg new Image();historyImg botCan.toDataURL(image/png);historyImg.onload (){//添加到历史记录imgHistory.push(historyImg);}//清除topCtx画布topCtx.clearRect(0,0,canvasWidth,canvasHeight);}}}//画带透明度涂鸦const drawCurve (e){let x (e||window.event).offsetX;let y (e||window.event).offsetY;drawPoints.push({x,y});topCtx.strokeStyle rgba(255,0,0,0.2);topCtx.lineWidth 10;topCtx.beginPath();topCtx.moveTo(lastPoint.x,lastPoint.y);topCtx.lineTo(x,y);topCtx.stroke();lastPoint {x,y};}//canvas添加鼠标事件topCan.addEventListener(mousedown,mousedown);topCan.addEventListener(mousemove,mousemove);topCan.addEventListener(mouseup,mouseup);//全局添加鼠标抬起事件document.addEventListener(mouseup,(){isDown false;isMove false;isDrawed false;});/script
/body
/html总结
踩坑路漫漫长~
