canvasLessions

canvas学习demo

1. canvas元素大小与绘图表面大小
2. canvas元素状态保存和恢复(画网格线)
3. canvas元素状态保存和恢复(画网格线)
4. canvas 鼠标事件
5. canvas 保存和恢复绘图表面
6. 在 canvas 中显示html控件
7. 在 canvas 联合 html 用法，高级html控件用法，橡皮筋式选取框
8. canvas打印
9. 离屏canvas，以图像的方式实现时钟的程序
10. 矩形绘制
11. 线性渐变1
12. 线性渐变2
13. 放射性渐变
14. canvas图案
15. canvas阴影、内嵌阴影
16. 路径、描边与填充1
17. 路径、描边与填充2
18. 路径、描边与填充3，非零环绕填充（圆环）
19. 路径、描边与填充4，非零环绕填充（几何图形）
20. 线段
21. 绘制线段宽为0.5的网格
22. 绘制坐标轴
23. 画图 — 绘制线条功能、橡皮擦功能
24. 虚线绘制
25. 扩张canvas的canvasRenderingContext2D对象实现虚线绘制
26. canvas虚线api，使用虚线api完成跑马灯效果
27. canvas线段端点与连接点的绘制
28. 画图 — 绘制圆形、橡皮擦功能
29. arcTo() 绘制‘圆角矩形’
30. 仪表盘demo
31. 二次贝塞尔曲线 demo1
32. 二次贝塞尔曲线，带有圆角的箭头图案
33. 三次贝塞尔曲线demo1
34. 多边形demo
35. 画图 — 绘制多边形
36. 画图 — 绘制，编辑-可拖动多边形
37. 画图 — 可编辑贝塞尔曲线
38. 画图 - 可旋转多边形demo
39. 镜像 scale(-1,1)
40. 自定义坐标转换 transform
41. 图像合成示例 globalCompositeOperation
42. 图像合成模式演示
43. 橡皮檫，剪辑区域 clipping region
44. 伸缩式动画，剪辑区域 clipping region
45. 文本的描边与填充
46. 使用渐变色图及图案来填充文本
47. font属性
48. font水平与垂直定位
49. font文本居中
50. 为坐标轴添加文本标签
51. 绘制数字仪表盘周围的文本标签
52. 环形文本
53. 闪烁的光标
54. 单行文本输入
55. 多行文本输入
56. 图像绘制
57. 图像放大
58. 图像水印（普通绘制）
59. 图像水印（离屏canvas）
60. 图像放大，橡皮筋式选取框，只存储和恢复选框内的图像，无需存储整个图像
61. 能够修改图像数据的橡皮筋式选取框，离屏canvas
62. 负片滤镜
63. 黑白滤镜
64. 浮雕滤镜
65. 墨镜滤镜，Web Worker
66. 墨镜滤镜，Web Worker、离屏canvas、剪辑区域
67. 动画，图片渐渐淡出
68. 动画，图片渐渐进入
69. 放大镜 ？
70. canvas绘制视频
71. canvas处理过滤视频
72. 反弹球动画
73. 统计帧速率
74. 实时显示帧速率
75. 基于时间的运动（1s运行60帧）
76. 基于时间的运动（1s运行120帧）
77. 移动的云
78. 移动的风景
79. 放大镜，手势
80. 倒计时，定时动画
81. 简单的sprite例子，sprite构造器
82. 精灵时钟
83. 使用箭头左右移动小球（定时行为）
84. 图像绘制器
85. 走路动画（精灵图表）
86. 从右向左走（行为动画)
87. 爆炸动画
88. 物体下落
89. 投球游戏
90. 钟摆
91. 缓入/缓出/弹簧运动
92. 缓动动画与匀速运动对比
93. 小球碰墙demo（边界检测）
94. 投球（外接圆判别碰撞方法）
95. 外接矩形碰撞检测
96. 投球（光线投射检测碰撞方法）
97. 超平面分离定理
98. 多边形和圆形SAT碰撞检测
99. 图像与精灵的碰撞检测
100. 利用最小平移向量使两个物体粘在一起
101. 利用最小平移向量实现反弹效果
102. 圆角矩形组件
103. 进度条
104. 拖动条 Sliders
105. 图片缩放
106. 移动端视口宽度设置demo
107. 移动端放大镜demo
108. 绘图 + 软键盘

其它: 1. games文件夹： ungame: 游戏引擎模板 pinball：弹珠游戏