HTML5 Canvas实战

歪脖网为您提供了HTML5 Canvas教程, 让零基础web前端工程师从入门到完全精通HTML5 Canvas, 是web前端学习线路的必备教程, 学HTML5 Canvas就上歪脖网


第 1 章 路径和文本

1.1 绘制直线

1.2 绘制圆弧

1.3 绘制二次曲线

1.4 绘制贝塞尔曲线

1.5 绘制锯齿线

1.6 绘制螺旋线

1.7 处理文本

1.8 绘制带阴影的3D文本

1.9 揭示分形学的魔力:绘制鬼树

第 2 章 图形及组合

2.1 绘制矩形

2.2 绘制圆形

2.3 使用自定义图形和填充样式

2.4 玩转贝塞尔曲线:绘制云朵

2.5 绘制透明图形

2.6 使用上下文栈来保存和恢复样式

2.7 使用图形操作

2.8 使用循环创建图案:绘制齿轮

2.9 随机图形属性:绘制开满鲜花的原野

2.10 创建自定义图形:绘制扑克牌花色

2.11 融会贯通:绘制喷气式飞机

第 3 章 处理图像和视频

3.1 绘制图像

3.2 裁剪图像

3.3 拷贝、粘贴画布的某部分

3.4 处理视频

3.5 获取图像数据

3.6 处理像素:图像反色

3.7 视频反色

3.8 把图像颜色转换成灰色

3.9 画布绘图转换为data URL

3.10 画布绘图另存为图像

3.11 使用data URL加载画布

3.12 创建像素化的图像聚焦

第 4 章 精通画布变换

4.1 平移画布上下文

4.2 旋转画布上下文

4.3 缩放画布上下文

4.4 创建镜像变换

4.5 创建自定义变换

4.6 切割画布上下文

4.7 使用栈处理多重变换

4.8 把圆变换为椭圆

4.9 旋转图像

4.10 绘制一个简单的logo并随机定位、旋转、缩放

第 5 章 动画给画布带来生机

5.1 创建Animation类

5.2 创建直线运动

5.3 创建加速度

5.4 创建振荡运动

5.5 摆动的气泡

5.6 摆钟

5.7 动画机械齿轮

5.8 动画时钟

5.9 模拟粒子物理学

5.10 创建微生物生命形态

5.11 增强画布并显示FPS值

第 6 章 与画布交互:为图形和区域附加事件监听器

6.1 定义Events类

6.2 使用画布鼠标坐标

6.3 为区域附加鼠标事件监听器

6.4 为移动设备上的区域附加触摸事件监听器

6.5 为图像附加事件监听器

6.6 拖放图形

6.7 拖放图像

6.8 创建图像放大器

6.9 创建绘图应用程序

第 7 章 创建图表

7.1 创建饼图

7.2 创建柱状图

7.3 根据方程式绘制图形

7.4 通过折线图标记数据点

第 8 章 通过游戏开发来拯救世界

8.1 创建英雄和敌人的精灵表

8.2 创建关卡图像和边界地图

8.3 创建英雄和敌人的Actor类

8.4 创建Level类

8.5 创建Health Bar类

8.6 创建Controller类

8.7 创建Model类

8.8 创建View类

8.9 创建HTML文档并启动游戏

第 9 章 WebGL简介

9.1 创建一个WebGL包装器来简化WebGLAPI

9.2 创建三角形平面

9.3 在3D空间内旋转三角形平面

9.4 创建一个旋转的立方体

9.5 增加文理和光照效果

9.6 创建一个可以探索的3D世界

返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验