<!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 type="text/css"> *{padding: 0px;margin: 0px;} body { overflow: hidden; } </style> </head> <body> <canvas id="draw" ></canvas> <script type="text/javascript"> //获取canvas. const canvas=document.querySelector("#draw"); if(canvas.getContext) { var ctx=canvas.getContext("2d"); console.log("支持666"); } else { console.log("不支持"); } /*支持就执行余下的语句能够用起来,不支持的话,页面上会什么效果都没有。*/ canvas.width=window.innerWidth; canvas.height=window.innerHeight; ctx.lineWidth=90;//线条的颜色. ctx.lineCap="round";/*线条结束时的形状*/ ctx.lineJoin="round";/*当两条线条相交时.*/ ctx.strokeStyle="red"; let isDrawing=false;//还没开始画 let x=0;let y=0; let lastX = 0; let lastY = 0; let hue = 0; let direction = true; function draw(e) { if(!isDrawing) { return; } x=e.offsetX;//获取移动后停下的坐标点. y=e.offsetY;//获取移动后停下的坐标点. //彩虹效 ctx.strokeStyle=`hsl(${hue},90%,50%)`; if(hue>360)hue=0; hue++; // 控制笔触大小 if(ctx.lineWidth>120||ctx.lineWidth<10) { direction=!direction; } if(direction) { ctx.lineWidth++; } else { ctx.lineWidth--; } /*这段思路时:开始direction = true,++到大于120就direction=!direction;,为false,就else--到小于10时就 direction=!direction;,true,就++至此循环.*/ ctx.beginPath(); ctx.moveTo(lastX,lastY);//开始画了 ctx.lineTo(x,y); ctx.stroke(); [lastX,lastY]=[x,y] } canvas.addEventListener('mousedown',e=> { isDrawing=true;//开始画. [lastX,lastY]=[e.offsetX,e.offsetY];//获取按下的开始xy坐标点 }); canvas.addEventListener("mousemove",draw); canvas.addEventListener('mouseup',()=>isDrawing=false);//这两个都false canvas.addEventListener('mouseout',()=>isDrawing=false); </script> </body> </html>
第一：写一个canvas对象,用canvas来做. ```javascript
注意一下:它默认宽300 高150。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript"> console.log(canvas.offsetWidth,canvas.offsetHeight); </script> </body> </html>
第二·：判断所用的浏览器是否支持canvas.
const canvas=document.querySelector("#draw"); if(canvas.getContext) { var ctx=canvas.getContext("2d"); console.log("支持666"); } else { console.log("不支持"); }
第三：让canvas绘图可以画整个body.并且要设置线条的宽度+线条结束时候的形状+两天线条相交时的形状.+线条的颜色.
canvas.width=window.innerWidth; canvas.height=window.innerHeight; ctx.lineWidth=90; ctx.lineCap="round"; ctx.lineJoin="round"; ctx.strokeStyle="red";
第四；当点击body某一处的时候就开始作画.然后是获取按下去时候的xy坐标点.
canvas.addEventListener('mousedown',e=> { isDrawing=true; [lastX,lastY]=[e.offsetX,e.offsetY]; });
第五：移动的时候触发draw函数,
canvas.addEventListener("mousemove",draw);
第六:记录移动完毕后的xy坐标.
x=e.offsetX; y=e.offsetY;
第七;多姿多彩的效果:
ctx.strokeStyle=`hsl(${hue},90%,50%)`; if(hue>360)hue=0; hue++;
第八：控制笔触的宽.(口诀；太大了就小,太小了就大)
if(ctx.lineWidth>120||ctx.lineWidth<10) { direction=!direction; } if(direction) { ctx.lineWidth++; } else { ctx.lineWidth--; }
第九:开始绘制
ctx.beginPath(); ctx.moveTo(lastX,lastY); ctx.lineTo(x,y); ctx.stroke(); [lastX,lastY]=[x,y]//核心
注意一下·；lastx与lasty是down的时候的xy坐标,x，y是move完毕后的坐标.
有一个问题
第十:怎么办？[lastX,lastY]=[x,y] 就行了，代表按下了一直移动能够完美续接. 不然的话，会按下然后移动会像上面的图一样。 这里解决了上面的图片的问题.
