在这个demo中，我使用Canvas实现了一个简易的画板工具，包括线条绘制、橡皮擦、颜色填充、清空画板、选择画笔颜色、选择填充颜色、选择笔头粗细等功能。最新更新（2022/10/18）增加了拖拽和撤销功能。
-
线条绘制和橡皮擦： 通过选择画笔工具或橡皮擦工具，可以在画板上进行自由绘制。
-
颜色填充： 提供了颜色选择器，可以自定义画笔颜色和填充颜色。
-
清空画板： 点击清空按钮可以清空整个画板。
-
选择画笔颜色和填充颜色： 通过颜色选择器，可以灵活选择画笔和填充颜色。
-
选择笔头粗细： 提供了笔头粗细的调节功能，满足不同绘画需求。
-
拖拽功能： 最新更新新增了拖拽功能，方便用户调整画板位置。
-
撤销功能： 最新更新新增了撤销功能，可以撤销之前的绘画操作。
在这个demo中，我模拟实现了Vue的数据劫持、双向绑定和数组对象原型方法代理。使用数据劫持结合发布订阅者模式，为对象基本类型和数类型追加get和set方法，为数组设置代理。最新更新（2022/11/1）增加了简单的{{}}模板编译及绑定，虚拟DOM和真实DOM转换。
-
数据劫持： 对象基本类型和数类型通过劫持
get和set方法实现数据的监听。 -
发布订阅者模式： 使用发布订阅者模式实现数据变化时的通知和更新。
-
{{}}模板编译及绑定： 实现了简单的模板编译，将{{}}中的变量与实际数据绑定。
-
虚拟DOM和真实DOM转换： 实现了虚拟DOM和真实DOM的相互转换，提高DOM操作的效率。
这个demo主要展示一些简单而炫酷的动画效果。
-
动画效果1： 描述动画效果的具体信息。
-
动画效果2： 描述动画效果的具体信息。
在这个demo中，我实现了选择图片、压缩后下载的功能。主要使用HTML5的Canvas标签的toDataURL和drawImage方法。首先选择图片，创建img标签，并将其固定定位在屏幕外。然后创建canvas标签，大小和定位在图片上。获取到图片实例，调用canvas的drawImage()将其绘制在canvas上。再调用canvas的toDataURL('image/jpeg', 压缩比例)生成压缩后的图片的base64编码。最后调用base64转文件的方法生成文件，动态创建a标签进行下载。
-
选择图片： 通过文件选择器选择需要压缩的图片。
-
创建img和canvas： 创建
img标签并将其固定定位在屏幕外，创建canvas标签，大小和定位与图片相同。 -
绘制图片： 获取图片实例，调用
canvas的drawImage()将图片绘制在canvas上。 -
压缩图片： 调用
canvas的toDataURL('image/jpeg', 压缩比例)生成压缩后的图片的base64编码。 -
生成文件并下载： 调用base64转文件的方法生成文件，动态创建
a标签进行下载。
在这个demo中，我演示了使用CSS3的动画、setInterval和requestAnimationFrame三种方式实现选择动效进行对比。其中，animation是关键帧动画，类似requestAnimationFrame机制，通过@keyframes来定义关键帧。最流畅。requestAnimationFrame定义浏览器在下一帧优先执行的DOM操作，动画效果和CSS差不多。而setInterval通过计时器来执行动画，但由于JS单线程机制，在执行其他操作时可能导致动画丢帧，表现不如前两者流畅。