学习canvas,但愿不要入门到放弃

看着w3c里面的Canvas学习系列文章,跟着敲

偷懒没有把所有代码都区分开分成文件.代码里的注释大部分都是一些小demo的演示

• canvas入门准备

  了解canvas基本知识

• canvas坐标系统

• 坐标变换

• 绘制线段

• 绘制虚线和圆点线

• 线型

• save()和restore() //看了一半

在MDN看了一遍教程

接下来要学习动画!

• 基本用法
• 绘制形状
• 添加样式和颜色
• 绘制文本
• 使用图片
• 变形

• 合成与裁剪
• 基本动画

• 在sf上看到大佬做的 前端系列——canvas实现按住鼠标移动绘制出轨迹 于是效仿着做了一个一样的

继续学动画

• 高级动画

• 像素操作

• 点击区域和无障碍访问

• 在sf上看到大佬做的《每周一点canvas动画》—— 文字粒子遂照着敲了一遍,膜拜之

• 更新自己实现的一个效果 —— 鼠标移动到画布上显示遮罩后面的图片的部分

• 补更新:利用chrome人脸识别API实现一个简单的视频人脸识别demo。demo

  • 参考前端人脸检测指南

• 今日更新: canvas 粒子效果 实现自由滚动 接近连线功能。demo

  • 参考炒鸡简单的canvas粒子
  • 参考canvas 会动的粒子效果
  • 参考JS HEX十六进制与RGB, HSL颜色的相互转换