Canvas奇技淫巧

标签： Canvas 分类： Javascript 创建时间：2019-11-30 14:51:43 更新时间：2025-01-17 10:39:22

1.事件监听

(1) 刚开始知道的主要原理是在cavas上绑定一个时间，然后判断当前鼠标的位置落在哪个图形中，然后重绘这个图形。

参考文章：
1.canvas自由拼图
2.canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
3.监听Canvas内部元素点击事件的三种方法
4.如何在Canvas上的图形/图像绑定事件监听？
5.canvas事件绑定，画布中图形的事件处理，以及画布事件代理

2.cavas性能优化的方法

(1) 使用 requestNextAnimationFrame进行动画循环。
(2) 利用剪辑区域来处理动画背景或其他不变的图像。
(3) 离屏缓冲区(离屏canvas)。
(4) 尽量利用 CSS。

背景图
transform变幻
(5) 关闭透明度
(6) 尽量不要频繁地调用比较耗时的API
(7) 避免浮点数的坐标
(8) 渲染绘制操作不要频繁调用
(9) 尽量少的改变状态机 ctx的里状态
(10) 尽量少的调用 canvas API
(11) 避免阻塞
(12) web worker
(13) 分解任务

参考文章：
1.Canvas性能优化

3.局部重绘

局部重绘，简单点就是只绘制变化的部分，不变化的部分就不用绘制了。但是，一个直观的感觉就是，如果两个形重叠，如何通过clip只清理变化的部分，而不用绘制全部呢？

参考文章：
1.【Fanvas技术解密】HTML5 canvas实现脏区重绘
2.Canvas脏矩形应用之截图

4.飞线效果

飞线效果，就是像航班动态图的展示效果。

参考文章：
1.canvas实现飞线流动效果

5.监听点击事件

canvas作为一个整体，并不能实现像点击dom元素一样，对每一个dom元素进行事件监听。

参考文章:
1.监听Canvas内部元素点击事件的三种方法 (像素法、角度法和射线法，判断点击的位置是否在元素内)
2.canvas绘制不规则图形，点击获取当前图形索引
3.如何在canvas内部元素上监听事件 (实际上就是封装了一个矩形，然后通过判断点击的点是否在矩形内，然后触发canvas的点击事件)
4.canvas绘制不规则图形，点击获取当前图形索引

6.多图层

参考文章:
1.html5 javascript实现canvas里边多图层显示怎么弄
2.用Canvas实现图层

7.拖拽

参考文章:
1.canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备

8.局部重绘

参考文章:
1.Canvas 局部渲染优化总结

9.缩放

参考文章:
1.canvas 中做到无损缩放
2.canvas宽高改变后，画布上的内容消失了 getImageData 保存画布数据，改变宽高后重绘
3.Canvas中像素级别ImageData缩放
4.canvas绘制图像的两种缩放模式

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。