广东 广州     专业、实战网络营销、淘宝电商、设计培训教程中心
2018年新春学费优惠及放假通知!
新川教育-专业的网络营销培训机构
网络营销培训咨询提示
面授+在线教育+视频课程销售一体化.
网络营销选择培训班
简单形状绘制《HTML5系列教程18》

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

简单形状绘制《HTML5系列教程18》

简单形状绘制《HTML5系列教程18》

    Canvas在HTML5中有着非常强大的功能,它不仅可以绘制一些简单的图案,还可以进行一些简单形状绘制如:圆形、三角形、矩形、圆角矩形等二维形状,并可以根据用户的实际需要绘制自定义二维图形。而要完成这项功能,就需要用到CanvasRenderingContext2D对象提供的另外一些API。


1.圆形的绘制方法

    在上篇文中我们使用了arc函数绘制圆弧,不知道大家有没有注意到我们在指定圆弧结束角时使用了“2*math.PI*0.75”这样的参数,Math.PI是计算中表示数学π的意思,我们用2π乘以0.75就是绘制了四分之三个圆,这样就得到了一个圆弧。如果我们把0.75去掉,就能绘制一个圆形了,代码如图所示:

HTML5中圆形的绘制方法代码

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

HTML5中圆形的绘制方法效果预览


2.三角形的绘制方法

    在上一篇文章我们也学了如何绘制一条直线,那么如果我们绘制三条直线,并设置三条直线的起点和终点互相连接,这样我们就能得到一个三角形了,绘制三角形的代码如图所示:

HTML中三角形的绘制方法代码

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

HTML中三角形的绘制方法效果预览


3.圆角矩形的绘制方法

    上面的图形我们都是用Canvas的CanvasRenderingContext2D能够直接提供的图形对象,那如果需要绘制如圆角矩形这样特殊一点的图形,我们应该怎样绘制呢?那么这里就需要用到另外几个API对象了,通过一些特殊的处理,绘制出符合我们要求的图形。在下面的代码中,我们使用了arcTo函数绘制圆角矩形,该函数的描述见下表:

HTML5中arcTo函数详情描述

    arcTo函数为我们提供了两条切线之间圆弧的绘制方法,圆角矩形是由四个这样的圆弧和四条直线组成的,所以只要我们能精确控制圆弧和直线的每个点,就能准确绘制出一个圆角矩形。绘制圆角矩形的代码如图所示:

在HTML5中圆角矩形的绘制方法代码

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

在HTML5中圆角矩形的绘制方法效果预览


4.简单的自定义图形绘制“微笑表情绘制”

    虽然Canvas提供了很多基本图形的绘制,但在实际应用中,经常会需要绘制一些复杂的图形,而Canvas却并没有提供绘制这些图案的API,所以这时候就需要使用多种绘图方法来绘制这些图形。以下是作为示例所绘制的一个简单的自定义图形“微笑表情”

在HTML中微笑表情绘制方法代码

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

在HTML中微笑表情绘制方法效果预览


日常生活中可以见到很多不规则的图形,你可以想到些什么图形呢?大家可以尝试一下利用已经学了的知识把自己想到的一些简单形状绘制出来。了解更多精彩资讯请添加我们的官方微信:pyyuanxing。谢谢大家的观看。祝大家:身体健康、生活愉快!

      友情链接

  1. 学校简介
  2. 资料下载
  3. 开班信息
  4. 学员作品
  5. 学校图片
  6. 师资介绍
  7. 资料下载
  1. 工作推荐
  2. CAD培训
  3. 平面设计
  4. 室内设计
  5. 办公文秘
  6. 文秘教程
  7. 美术培训
  8. site map

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