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

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

    目录 收起>

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

    1.HTML5 Canvas 绘制渐变图形 00:07:25

    本课时讲解 HTML5 Canvas 绘制渐变图形,绘制渐变图形时需要使用到 LinearGradient 对象,使用图形上下文对象的 createLinearGradient 方法创建该对象。

    2.HTML5 Canvas 绘制径向渐变 00:04:45

    本课时讲解 HTML5 Canvas 绘制径向渐变。径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。

    3.HTML5 Canvas 绘制变形图形 00:05:28

    本课时讲解 HTML5 Canvas 绘制变形图形,主要使用 translate、scale 和 rotate 方法进行处理。可以实现变形图形的绘制。
  • 提问

    提交问题
  • 下载

  • 线路

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

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

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

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

3课时,18分钟2015-06-10
iwen
iwen

极客学院金牌布道师

课程背景:
在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形。

核心内容:
createLinearGradient.createRadialGradient.translate.scale.rotate

软件环境:WebStrom

是否提供资料:

课程等级:初级

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

    HTML5 Canvas 绘制渐变图形

    07:25

    本课时讲解 HTML5 Canvas 绘制渐变图形,绘制渐变图形时需要使用到 LinearGradient 对象,使用图形上下文对象的 createLinearGradient 方法创建该对象。

  • 2

    HTML5 Canvas 绘制径向渐变

    04:45

    本课时讲解 HTML5 Canvas 绘制径向渐变。径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。

  • 3

    HTML5 Canvas 绘制变形图形

    05:28

    本课时讲解 HTML5 Canvas 绘制变形图形,主要使用 translate、scale 和 rotate 方法进行处理。可以实现变形图形的绘制。

相关课程

  • HTML5 Canvas 使用路径

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

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

    本课程主要讲解 HTML5 File API 的应用,首先介绍其协议,并基于此协议实现文件夹内容浏览、刷新功能,然后创建操作栏并使用 WebFont 来实现操作栏图标,最后创建一个 HTML5 弹出对话框并实现新增文件夹功能。

    4课时 32分钟
    中级
    19401人学习
  • 初级前端工程师面试题

    本课程介绍一下初级前端开发工程师在面试中需要注意的事项以及常见的面试题。

    1课时 6分钟
    初级
    26786人学习
  • 和产品经理配合那些事

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

    3课时 13分钟
    初级
    9776人学习