HTML5 Canvas 使用路径 VIP

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

    目录 收起>

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

    1.HTML5绘制圆形 00:06:22

    本课时讲解HTML5绘制圆形,主要包含四个步骤,开始创建路径、创建图形的路径、路径创建完成后,关闭路径和设定绘制样式,调用绘制方法,绘制路径。

    2.HTML5 moveTo与lineTo 00:05:33

    本课时讲解moveTo与lineTo,作用是将光标移动到指定坐标点,绘制直线的时候以这个坐标点为起点,moveTo(x,y)。

    3.使用bezierCurveTo绘制贝塞尔曲线 00:06:34

    本课时讲解使用bezierCurveTo绘制贝塞尔曲线,绘制曲线需要注意使用方法的参数,bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
  • 提问

    提交问题
  • 下载

  • 线路

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

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

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

HTML5 Canvas 使用路径

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

极客学院金牌布道师

课程背景:
想要绘制其他图形,需要使用路径,使用路径包含4个步骤,开始创建路径、创建图形的路径、路径创建完成后,关闭路径和设定绘制样式,调用绘制方法,绘制路径。

核心内容:
绘制路径.moveTo.lineTo.bezierCurveTo

软件环境:WebStrom

是否提供资料:

课程等级:初级

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

    HTML5绘制圆形

    06:22

    本课时讲解HTML5绘制圆形,主要包含四个步骤,开始创建路径、创建图形的路径、路径创建完成后,关闭路径和设定绘制样式,调用绘制方法,绘制路径。

  • 2

    HTML5 moveTo与lineTo

    05:33

    本课时讲解moveTo与lineTo,作用是将光标移动到指定坐标点,绘制直线的时候以这个坐标点为起点,moveTo(x,y)。

  • 3

    使用bezierCurveTo绘制贝塞尔曲线

    06:34

    本课时讲解使用bezierCurveTo绘制贝塞尔曲线,绘制曲线需要注意使用方法的参数,bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

相关课程

  • 和产品经理配合那些事

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

    3课时 13分钟
    初级
    9890人学习
  • HTML5 编辑 API 之 Range 对象(二)

    本套课程讲解 Range 对象的方法,包含 cloneRange、cloneContents、extractContents、createContextual-Fragment、insertNode、compareBoundaryPoints、collapse、detach 方法。

    3课时 21分钟
    初级
    16328人学习
  • 初级前端工程师面试题

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

    1课时 6分钟
    初级
    27118人学习
  • HTML5 File API 的应用

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

    4课时 32分钟
    中级
    19605人学习