2024年前端最全js学习之canvas的基础与应用(一)，web移动web开发

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

下面就来了解具体画的东西，线段，圆等

1.线段： ctx.move(x,y) 表示将画笔抬起移动到x,y这个像素点  ctx.lineTo(x,y) 画一条直线从起始点到此时的x,y这个像素点。ctx.stroke()对线段进行描边  ctx.lineWidth = 20 设置线段的宽度  ctx.closePath() 闭合当前的路径 ctx.strokeStyle = ‘green’ 表示所描边的颜色。下面就是一个实际的例子，上面也有代码的注释。

2.作画成矩形：ctx.rect(x,y,长,宽)  x与y表示作画矩形的左上角的顶点在使用这种方式时也要注意路径的问题  ctx.fillRect(x,y,长,宽）这表示自动填充这个矩形的内部颜色，默认情况下内部填充的颜色是黑色，采用这种方式时不需要注意路径的问题  ctx.strokeRect(x,y,长,宽),自动进行描边，这种方式不需要注意路径问题  ctx.clearRect(x,y,长,宽)表示擦除当前的矩形的区域。接下来就是这个实际例子的应用，上面也有具体的每种方式要注意的内容，在这里换用画布实现了矩形下落的这个动画效果。

3.弧角  arc(x,y,起始弧度,结束弧度,方向)  这里使用弧度时需要注意的是要使用Math.PI/180*n的形式来表示，方向用0和1来表示的，0表示顺时针 1表示逆时针 在这里尤其需要注意的是顺时针与逆时针结合的问题 例如角度是顺时针的90度，则表示的是1/4个圆 逆时针是3/4个圆。下面就是弧角的应用

4.圆角  arcTo(x1,y1x2,y2,r),确定好起始点x1与y1,结束点x2,y2以及半径r，下面就是圆角的应用

5.贝塞尔曲线  二次贝塞尔曲线 quadraticCurveTo(x1,y1,x2,y2)     有三个顶点A B C 规定从A到B 与从B到C的距离所需要的时间相等,此时开始计时，从A到B有个点，从B到C有个点，两点连线的切线形成的点就为二次贝塞尔曲线  三次贝塞尔曲线    bezierCurveTo(x1,y1,x2,y2,x3,y3) 三次贝塞尔曲线 有四个点，先形成两条直线，再形成一条直线，最后得到三次贝塞尔曲线。下面就是贝塞尔曲线的应用。

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

g-eK4ROlf2-1714982942045)]
[外链图片转存中…(img-3NxZJuEZ-1714982942046)]