【JS30-WesBos】HTML5Sketchpad06

标题：【原生javascript项目】Canvas08日期：2022-01-0720:13:07标签：原生javascript项目类别：30个原生javascript项目作者：?IaineWanyi简介：30DayChallenge是由WesBos设计的为期30天的原生js编程挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。这个项目是第8天的项目。为了更具挑战性，我实现了移动绘图和画笔样式选择的功能。玩得开心网站！?(^?^*)网页效果：https://janice143.github.io/m...（画个鼻子，一不小心暴露自己是魔术师，哈哈）在电脑端可以使用鼠标移动点击绘图，在移动端可以使用触摸移动实现绘图。可以调整绘图笔的颜色和粗细。选择橡皮擦修改局部区域。清屏按钮可以一键清屏。项目重点canvaswindow.innerWidthlineJoin,lineWidth,lineCapstrokeColorbeginPath,moveTo,lineTo,stroke()鼠标事件mousemove:e.offsetX,e.offsetYmouseupmouseoutmousedown触摸事件touchmovetouchendtouchcanceltouchstarttouch坐标计算坐标偏移问题输入标签变化事件this.valuethis.namethis.checked滑块输入线性transitionintonon-lineartransitioncssflexcontainerattributedisplay:flexalign-items:centerverticalcenterjustify-content:centerhorizo??ntalcenteritemprocess三个输入控件的html部分colortype="color"thicknesstype="range"erasertype="checkbox"canvas标签setcanvasclearbuttontype="button"Js部分获取canvas标签，并设置宽高；获取四个输入元素使用getContext()获取渲染上下文并存储在变量ctx中。在二维渲染上下文中，左上点的坐标为（0,0），右（x轴）和下（y轴）为正。设置初始值初始化画笔颜色（ctx.StrokeStyle）、粗细（ctx.lineWidth）、橡皮擦未选中（eraserChecked=false）；lineCap（直线末端的形状）设置为圆形，lineJoin（两条线段交界处的形状）设置为圆形。编写updateValue()函数。当三个控件的输入发生变化时，就会触发一个事件。调用这个函数来更新画笔的三个初始值。编写draw()函数设置一个变量，用于标记绘图状态，绘制或不绘制（true或false）判断是鼠标事件还是触摸事件，返回当前鼠标点和触摸的坐标指向分配新画笔参数绘制前调用beginPath()，设置路径的起点和终点。编写clearCanvas()函数来清除屏幕。清屏的原理就是在画布上画一个白色的矩阵。所有的输入监听事件，控件中的变化事件，清屏都是点击事件。CSS部分使用overflow:hidden设置页面不移动，这在移动端触摸时必不可少。项目知识点Canvas创建Canvas元素通过JavaScript绘制varcanvas=document.getElementById('canvas');varctx=canvas.getContext('2d');基本样式属性color：strokeStyle：线条描边的颜色，fillStyle：填充线条的颜色type：lineCap：描边的形状；lineJoin：线条比较的方式；lineWidth：线条路径绘制的宽度beginPath()：新建路径stroke()：绘制轮廓moveTo()：绘制操作的起点lineTo()：路径触摸的终点screenendcoordinateoffsetproblem使用鼠标事件在画布上绘制，很容易得到画布上面的坐标，用(e.offsetX,e.offsetY)就行了。但是对于移动端的触摸屏来说，必须使用【页面坐标】-【画布左上角坐标】=【画布坐标】的公式来计算当前触摸位置的坐标.changedTouches[0].clientX表示当前触摸点在页面的坐标，e.target.offsetLeft表示画布偏离页面左上角的位置。x=e.changedTouches[0].clientX-e.target.offsetLeft;y=e.changedTouches[0].clientY-e.target.offsetTop;JS30的第八个项目顺利完成，虽然对原项目做了一些改进，但总体上也实现了一些自己独有的功能。PS：我发现我真的很喜欢编程，喜欢前端开发。希望自己的能力越来越强，实现自己的程序员梦。感谢阅读，如有任何问题，请联系我：1803105538@qq.com。