实战网络营销、淘宝电商、设计培训教程中心
课程试听
新川教育-专业的网络营销培训机构
庆五一,特大优惠,一年仅一次!
三种教学方式任选:面授+在线教育+视频教学.
基本线条的绘制《HTML5系列教程17》

来源:新川教育 阅读数:1797
添加时间:2017-4-24   类别:网页设计教程

基本线条的绘制《HTML5系列教程17》

HTML5中基本线条的绘制

    在Canvas画布中我们可以使用JavaScript这支画笔绘制各种图形,它的功能之所以这么强大,是因为Canvas的CanvasRenderingContext2D对象为我们提供了丰富多彩的API工具,包括我们本次要了解的直线、二次曲线、贝赛尔曲线和圆弧曲线,下表中列出的这些API就是我们本次基本线条的绘制要用到的几种API。

HTML5中基本线条的绘制要用到的几种API

1.绘制直线

    我们在学生时代的几何课上就已经学过了“两点一线”,那么Canvas在绘制直线的时候也需要一个起点和一个终点,绘制直线的代码如下图所示:

在HTML5中绘制直线代码

    在谷歌浏览器中的预览效果如下图所示:

在HTML5中绘制直线预览效果

2.绘制二次曲线

    二次曲线(quadratic curve)也称圆锥曲线或圆锥截线,是直圆锥面的两腔被一个面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定,当控制点经过圆锥顶点时,曲线变成一个点、直线或相交线,当控制点不经过圆锥顶点时,曲线可能是圆、椭圆、双曲线和抛物线。使用Canvas的quadraticCurveTo函数绘制二次曲线的代码如下图所示:

在HTML5中绘制二次曲线的代码

    在谷歌浏览器中的预览效果如下图所示:

在HTML5中绘制二次曲线预览图

3.绘制贝塞尔曲线

    贝塞尔曲线是电脑图形中非常重要的参数曲线,广泛应用于计算机图形中为平铺曲线建立模型。贝塞尔曲线的每一个顶点都有两个控制点,用于控制在该点两侧的曲线的弧度。它有一个起点、一个终点、两个控制点,共四个点决定一条曲线。使用Canvas的bezierCurveTo函数可以非常方便地绘制曲线,绘制贝塞尔曲线的代码如下图所示:

在HTML5中绘制贝塞尔曲线代码示例

    在谷歌浏览器中的预览效果如下图所示:

在HTML5中绘制贝塞尔曲线预览图

4.绘制圆弧

    使用Canvas的arc方法绘制圆弧的代码如下图所示:

在HTML5中绘制圆弧的代码

    在谷歌浏览器中的预览效果如下图所示:

在HTML5中绘制圆弧的预览图

    这些便是几种基本线条的绘制方法了,还是很有意思的,大家在练习的时候可以试着绘制一些形状,试不出来也没关系,下一篇中我们将会介绍一些简单的形状的绘制方法。了解更多精彩资讯请添加我们的官方微信号:pyyuanxing。谢谢大家的观看。祝大家:身体健康、生活愉快。

      友情链接

  1. 关于我们
  2. 教学优势
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 学校图片
  7. 师资介绍
  8. 工作推荐
  1. PS培训
  2. CAD培训
  3. 室内设计
  4. 办公文秘
  5. 美术培训
  6. SEO课程
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6