课程免费试听
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
基本线条的绘制《HTML5系列教程17》

来源:新川教育 阅读数:2550
添加时间: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。谢谢大家的观看。祝大家:身体健康、生活愉快。

学营销送淘宝大优惠活动!    限20名! 报名从速。

      友情链接

  1. 办公文秘
  2. 美术培训
  3. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 学校图片
  7. 联系方式
  8. site map

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