Skip to content

Latest commit

 

History

History
51 lines (39 loc) · 3.39 KB

note_0730.md

File metadata and controls

51 lines (39 loc) · 3.39 KB

canvas笔记

  1. 贝塞尔曲线应用 css的animation-timing-function https://blog.csdn.net/wangyangsea/article/details/80579202 https://cubic-bezier.com/#.17,.67,.83,.67 google 浏览器支持查看

  2. canvas fill 填充规则 nonzore: 非零填充 evenodd: 奇偶填充 https://www.zhangxinxu.com/wordpress/2018/10/nonzero-evenodd-fill-mode-rule/

  3. lineWidth 半渲染问题，线的位置精准定位

  4. requestAnimationFrame 动画 https://blog.csdn.net/vhwfr2u02q/article/details/79492303

  5. MetaBall动画算法 http://www.sidefx.com/docs/houdini/nodes/sop/metaball.html

  6. image cors (cross origin resource sharing) crossorigin https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image#.E4.BB.80.E4.B9.88.E6.98.AF.22.E8.A2.AB.E6.B1.A1.E6.9F.93.22.E7.9A.84canvas

尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法，调用它们会抛出安全错误。

正确用法：image设置crossorigin，并且服务器设置CORS Access-Control-Allow-Origin （image设置crossorigin，服务器没设置也会污染）

  1. drawImage (image, x, y)

  2. translate 方法，用来移动 canvas 和它的原点到一个不同的位置。translate(x, y) 在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。 rotate 旋转，以x顺时针旋转角度https://codepen.io/pen/?&editable=true

  3. scale(x, y) 如果参数为负实数， 相当于以x 或 y轴作为对称轴镜像反转; 画图的方法的长度单位并不是1个像素点。 默认情况下，canvas 的 1 个单位为 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

  4. canvas 性能优化 https://www.jianshu.com/p/891cce4c2baf 图片离屏渲染

  5. clip 在 绘制图形 一章中，我只介绍了 stroke 和 fill 方法，这里介绍第三个方法clip。 clip() 将当前正在构建的路径转换为当前的裁剪路径。所有在路径以外的部分都不会在 canvas 上绘制出来 我们使用 clip()方法来创建一个新的裁切路径。 默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）。

  6. globalCompositeOperation 12种叠加方式，默认覆盖 我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像clearRect()方法做的那样）以及更多其他操作。

  7. 高级动画 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations 网页动画高效开发 https://developer.mozilla.org/zh-CN/docs/Games/Techniques/Efficient_animation_for_web_games 如果你正在通过操作DOM来实现你的UI，我十分建议你使用CSS transitions和/或CSS animations而不是JavaScript操作的动画。虽然有时JavaScript动画会更容易表达，除非你更需要像游戏动画般同步的UI动画效果，你不会做的比浏览器更好

  8. 像素数据 ImageData 图片灰度和反相颜色 保存图片 canvas.toDataURL('image/jpeg', quality)