canvas

canvas学习

canvas点击事件

• https://www.cnblogs.com/bruce-gou/p/13124925.html

canvas基础

• https://gitee.com/wangluoshihuang/canvas

从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理

• https://mp.weixin.qq.com/s/QTS-WQ9kiku4AzUktsdxtw 文章截图 (opens new window)
  • 浏览器的渲染流程
  • 虚拟滚动库

单个canavs画布的最大限制

• https://cloud.tencent.com/developer/ask/sof/102468 文章截图 (opens new window)
  • 里面有测试方法，其中第二个最常用，但是35000不一定是最大值。

canavs本身没有任何限制，只是浏览器处于内存等原因做了限制

• https://segmentfault.com/q/1010000000601812

Canvas的fill方法之“非零环绕原则nonzero”与“奇偶原则evenodd”

• https://www.zhangxinxu.com/wordpress/2018/10/nonzero-evenodd-fill-mode-rule
• https://www.jianshu.com/p/d4b8b5d931df

clip方法

• 设定裁选区之后，无论在Canvas上绘制什么，只有落在裁选区内的那部分才能得以显示，其余都会被遮蔽掉（不显示）。

每次对canvas的context进行设置，影响的只会是画出来的图形，对于canavs元素本身没有影响

• https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setTransform

canvas里面可以画另外一个canvas的内容

• 使用drawImage这个api，参考：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage#%E5%8F%82%E6%95%B0 这里的参数类型有一个 HTMLCanvasElement。

canvas状态的保存(save)和恢复(restore)

• https://blog.csdn.net/qq_33721778/article/details/122445669
  • 文章截图：https://gitee.com/wangluoshihuang/static_article/blob/master/canavs/canvas%E7%8A%B6%E6%80%81%E7%9A%84%E4%BF%9D%E5%AD%98(save)%E5%92%8C%E6%81%A2%E5%A4%8D(restore)_%E5%B0%8F%E7%99%BD%E4%B9%8B%E6%97%85%E7%9A%84%E5%8D%9A%E5%AE%A2-CSDN%E5%8D%9A%E5%AE%A2_canvas%20restore.html
• http://willless.com/whats-the-use-of-save-and-restore-in-canvas.html
  • 文章截图：https://gitee.com/wangluoshihuang/static_article/blob/master/canavs/Canvas%E4%B8%AD%E7%9A%84save()%E5%92%8Crestore()%E6%9C%89%E4%BB%80%E4%B9%88%E7%94%A8%EF%BC%9F.html

canvas检测某个点是否在路径内

• https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/isPointInPath

关于 canvas 模糊的问题（高清图解）

• https://mp.weixin.qq.com/s/xwN_FOhMptR85JliEi0DVQ
  • 截图 (opens new window)