<!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>
评论