2024年js学习之canvas的基础与应用(二)，2024年最新想搞定大厂面试官怎么说

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

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

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

2.文本  fillText(“hello”,100,100)  使用这种方式时，如果再设置字体的宽度，那么就会有一个实体的字，此方法接收三个参数，第一个表示参数文字的内容  第二三个参数表示文字产生的具体的位置  strokeText() 使用这种方式时，当设置字体的大小宽度时，就会产生一个描边字   ctx.font  = ‘50px sans-serif’ 设置字体的大小  第一个参数用绝对像素表示字体的大小  后面表示字体的样式   ctx.textAlign 每个字体设置时会有一个圆点，该圆点表示字体对齐的位置 ，此属性表示在水平方向上圆点的位置    ctx.textBaseline 此属性表示在竖直方向上圆点的位置  这两者的属性值可以在官网文档中可以查到

3.线段样式  lineCap属性 当设置宽度时，能直观的设置线段的形状，其参数值有三个 butt 即默认的样式   square  线段的长度等于移动的长度两边再分别加上线段宽度的一半  round  线段的长度等于移动的长度两边再分别加上线段宽度的一半，并且加上的线段宽度部分为圆角； lineJoin属性 截取线段组成的角的样式   其参数值也有三个  miter  即默认的样式尖角  round 将尖角设置的更加圆润，有一个弧度  bevel  截取尖角，将剩余的部分直接截取为一条线 ； ctx.miterLimit  当lineJoin时miter时，用于控制斜接部分的长度，如果斜接部分超过miterLimit的值(限定值为10),就会变成bevel

4.裁剪  ctx.clip() 裁剪当前路径外的区域，裁剪之后当前路径之外的区域就不能够绘制  可以通过save()和restore()恢复

5.合成 ctx.globalCompositeOperation = ‘source-over’  新元素与旧元素之间的合并方式，有十一种常用   source-over(默认)  destination-over copy

6.绘制图片  ctx.drawImage();  第一个参数img(image,video,canvas)  里面传入的参数有三种  当为三个参数时(x,y) x,y表示起始坐标点的位置   为五个参数时(x,y,dx,dy) 起始点的坐标以及图片区域的长度与宽度  九个参数时(x,y,dx,dy,x1,y1,w2,h2) 前四个参数为所绘制目标元素的起始点和宽度  后四个参数为canvas绘制的起始点的大小

7.将canvas内容导出   canvas.toDataUrl()  注意此方法是canvas自身的方法不是上下文对象  将canvas的内容抽成一张图片,base64编码，注意同源策略的限制 将canvas的内容放在img元素内部

8.获取canvas像素信息  ctx.getImageData(x,y,dx,dy)    同源策略 将所选区域的内容以base64编码展现  ctx.createImageData(x,y)创建新的空白页ImageData对象      ctx.putImageData(imaData,x,y)将图像数据放再画布上

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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