如何做微信朋友圈网站,微信商城怎么进,wordpress站文章显示时分秒,手机如何制作一个网站承接上文#xff0c;这是第8个案例#xff0c;要实现的效果是按住鼠标不放#xff0c;进行拖动时可以在画布上画出不同粗细不同颜色的曲线。 附上项目链接: https://github.com/wesbos/JavaScript30 主要思路#xff1a;鼠标按下时#xff0c;记录当前x,y坐标#xff0c;…承接上文这是第8个案例要实现的效果是按住鼠标不放进行拖动时可以在画布上画出不同粗细不同颜色的曲线。 附上项目链接: https://github.com/wesbos/JavaScript30 主要思路鼠标按下时记录当前x,y坐标作为起点鼠标移动时开始画线。鼠标左键抬起或移出画布时停止绘画。没什么讲的有个值得注意的点hsl这个表现颜色我之前不知道的。附上源码 scriptconst canvas document.querySelector(#draw);const ctx canvas.getContext(2d);canvas.width window.innerWidth;canvas.height window.innerHeight;ctx.strokeStyle #BADA55;ctx.lineJoin round;ctx.lineCap round;ctx.lineWidth 100;// ctx.globalCompositeOperation multiply;
let isDrawing false;let lastX 0;let lastY 0;let hue 0;let direction true;function draw(e) {if (!isDrawing) return; // stop the fn from running when they are not moused downconsole.log(e);
// HSL(H,S,L),css3颜色值表示方式,
// HHue(色调)。0(或360)表示红色120表示绿色240表示蓝色也可取其他数值来指定颜色。取值为0 - 360
// SSaturation(饱和度)。取值为0.0% - 100.0%
// LLightness(亮度)。取值为0.0% - 100.0%ctx.strokeStyle hsl(${hue}, 100%, 50%);ctx.beginPath();// start fromctx.moveTo(lastX, lastY);// go toctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();[lastX, lastY] [e.offsetX, e.offsetY];hue;if (hue 360) {hue 0;}if (ctx.lineWidth 100 || ctx.lineWidth 1) {direction !direction;}if (direction) {ctx.lineWidth;} else {ctx.lineWidth--;}}canvas.addEventListener(mousedown, (e) {isDrawing true;[lastX, lastY] [e.offsetX, e.offsetY];});canvas.addEventListener(mousemove, draw);canvas.addEventListener(mouseup, () isDrawing false);canvas.addEventListener(mouseout, () isDrawing false);/script 转载于:https://www.cnblogs.com/wangxi01/p/10648612.html
