为了账号安全,请及时绑定邮箱和手机立即绑定
简介:本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》,在大家对Canvas绘图有一定了解的基础上,本课程对Canvas的各个图形接口进行了系统详细地介绍,并辅以示例,让同学彻底掌握Canvas绘图,随心所欲在浏览器上绘制炫丽效果!

1章 让我们继续Canvas绘图之旅

通过《绚丽的倒计时效果》,相信大家已经对Canvas绘图有了基础的理解。现在,让我们继续Canvas之旅吧!
  1. 1-1 继续Canvas绘图之旅 (02:17)

3章 线条的属性

引入一个更加复杂的图形绘制案例——画一个五角星。并且通过这个案例,详细说明Canvas线条属性的使用。
  1. 3-1 线条的帽子:lineCap (04:59)
  2. 3-2 画一个五角星 (13:04)
  3. 3-3 线条的连接:lineJoin和miterLimit (05:03)
  4. 3-4 小结:线条的属性 (01:32)

5章 填充样式

本章详细介绍了fillStyle可以使用的所有样式。除了使用一种颜色以外,还包括使用线性渐变或者径向渐变进行渐变色的填充;使用图片、画布或者video视频进行样式填充。
  1. 5-1 线性渐变 (10:30)
  2. 5-2 径向渐变 (04:18)
  3. 5-3 使用图片、画布或者video (07:00)
  4. 5-4 渐变色和纹理小结 (02:01)

7章 文字的渲染

本章详细介绍了在canvas上进行文字渲染的方式。学习本章后,大家可以图文并茂地使用Canvas,创建属于自己的Canvas应用。
  1. 7-1 文字渲染基础 (05:42)
  2. 7-2 font:字型、字号和字体 (08:55)
  3. 7-3 文本对齐 (06:35)
  4. 7-4 文本的度量 (02:39)
  5. 7-5 小结:文字的渲染 (01:52)

8章 Canvas高级内容

给自己的绘图添加阴影;制定全局透明色;制作绚丽的探照灯效果或者剪纸效果;为Canvas绘图添加交互能力……本章探讨了5个不同侧面的高级话题,让你意识到,Canvas绘图——只有想不到,没有做不到!
  1. 8-1 阴影 (06:18)
  2. 8-2 globalAlpha和globalCompositeOperation (14:44)
  3. 8-3 clip和剪辑区域 (08:27)
  4. 8-4 路径方向和剪纸效果 (08:55)
  5. 8-5 使用Canvas交互和isPointInPath (08:05)
  6. 8-6 总结:Canvas高级内容 (02:22)

9章 Canvas之旅仍在继续

Canvas是如此的具有魅力,将web从传统的文档显示带入了一个全新的境地。Canvas标准一直在更新,同时,我们的Canvas之旅远没结束。让我们一起看看,使用Canvas,我们还有可能做出什么。
  1. 9-1 在Canvas中使用其他HTML元素 (07:25)
  2. 9-2 Canvas标准一直在更新 (07:50)
  3. 9-3 扩展Canvas的context (09:49)
  4. 9-4 Canvas与浏览器兼容性 (06:03)
  5. 9-5 Canvas图形库 (04:26)
  6. 9-6 如何使用Canvas处理图像 (02:23)
课程须知
需有基础HTML,JS,CSS知识。需学习《绚丽的倒计时效果》Canvas绘图第一课。
老师告诉你能学到什么?
深入了解Canvas各个绘图接口的使用方法。基础图形学知识。通过对一些基本元素的绘制,启发大家更多有效地绘图方法。
意见反馈 常见问题 APP下载
官方微信
hv128