HTML5 Canvas 图形绘制处理 认证专享

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本套课程讲解HTML5 Canvas 图形绘制处理,包含图形组合,图形阴影绘制和使用图像。通过使用图形上下文对象的globalCompositeOperation属性就可以实现图形组合的方式。

    1.HTML5 Canvas 图形组合 00:07:46

    我们可以使用Canvas API将一个图形重叠绘制在另一个图形上面,但图形中能够被看到的部分完全取决与图形的绘制顺序。

    2.HTML5 Canvas 给图形绘制阴影 00:06:51

    在HTML5中,使用 Canvas 元素可以给图形添加阴影效果。添加阴影效果时,只需利用图形上下文对象的几个关于阴影绘制的属性就可以了。

    3.HTML5 Canvas 使用图像 00:07:43

    在 HTML5 中,不仅可以使用 Canvas API 来绘制图形,还可以读取磁盘或网络中的图形文件,然后使用 Canvas API将该图像绘制在画布中。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

HTML5 Canvas 图形绘制处理

3课时,22分钟2015-06-15
iwen
iwen

极客学院金牌布道师

课程背景:
我们可以使用Canvas API 将一个图形重叠绘制在另一个图形上面,也可以使用Canvas元素可以给图形添加阴影效果,而且通过使用Canvas API 绘制图像。

核心内容:
图形组合.图形阴影绘制.使用图像

软件环境:WebStrom

是否提供资料:

课程等级:初级

适合人群:
具有一定HTML5基础
  • 技术问答
  • 1

    HTML5 Canvas 图形组合

    07:46

    我们可以使用Canvas API将一个图形重叠绘制在另一个图形上面,但图形中能够被看到的部分完全取决与图形的绘制顺序。

  • 2

    HTML5 Canvas 给图形绘制阴影

    06:51

    在HTML5中,使用 Canvas 元素可以给图形添加阴影效果。添加阴影效果时,只需利用图形上下文对象的几个关于阴影绘制的属性就可以了。

  • 3

    HTML5 Canvas 使用图像

    07:43

    在 HTML5 中,不仅可以使用 Canvas API 来绘制图形,还可以读取磁盘或网络中的图形文件,然后使用 Canvas API将该图像绘制在画布中。

相关课程

  • HTML5 Canvas 绘制渐变图形与绘制变形图形

    本套课程讲解HTML5 Canvas 绘制渐变图形与绘制变形图形,主要包含课程绘制渐变图形,绘制径向图形,绘制变形图形。掌握对渐变和变形的使用。

    3课时 18分钟
    初级
    19714人学习
  • 和产品经理配合那些事

    本课程介绍前端开发工程师和和产品经理配合那些事,以及对产品经理的职业进行相关的简单的介绍以便让前端开发工程师对整个产品的开发流程有更清晰的认知,最后来学习一下设计原型图进行简单的交互,以便让产品经理的想法更加落实。

    3课时 13分钟
    初级
    10060人学习
  • HTML5 Canvas 使用路径

    本套课程主要讲解HTML5 Canvas 使用路径,绘制除长方形与正方形以外的图形需要使用路径,包含moveTo与lineTo、使用bezierCurveTo绘制贝塞尔曲线。

    3课时 18分钟
    初级
    18891人学习
  • HTML5 File API 的应用进阶

    本课程讲解应用 HTML5 File API 进行手机文件的复制、移动和删除等操作,以及执行以上操作涉及到的列表模式切换,并在模式切换过程中,实现操作栏切换的动画效果。

    3课时 22分钟
    中级
    14338人学习