实战网络营销、淘宝电商、设计培训教程中心
课程免费试听
新川教育
暑期班开班啦!学费大优惠中!仅限前20名.
教学方式任?。?.面授;2.远程在线教育;
简单形状绘制《HTML5系列教程18》

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

福建体彩网:简单形状绘制《HTML5系列教程18》

福建31选7开奖时间 www.tzh2.cn 简单形状绘制《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函数为我们提供了两条切线之间圆弧的绘制方法,圆角矩形是由四个这样的圆弧和四条直线组成的,所以只要我们能精确控制圆弧和直线的每个点,就能准确绘制出一个圆角矩形?;嬷圃步蔷匦蔚拇肴缤妓荆?/P>在HTML5中圆角矩形的绘制方法代码

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

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


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

    虽然Canvas提供了很多基本图形的绘制,但在实际应用中,经?;嵝枰嬷埔恍└丛拥耐夹?,而Canvas却并没有提供绘制这些图案的API,所以这时候就需要使用多种绘图方法来绘制这些图形。以下是作为示例所绘制的一个简单的自定义图形“微笑表情”

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

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

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


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

培训教程公众号 
扫描左图添加公众号,海量视频教程免费学.
教学任?。?.面授;2.远程教学;
7月25号网络营销远程班准时开班,提交电话,免费试听.

      友情链接

  1. 关于我们
  2. 教学优势
  3. 资料下载
  4. 开班信息
  5. 学员作品
  6. 师资介绍
  7. 工作推荐
  1. 跨境电商
  2. UI设计
  3. 微信营销
  4. 办公文秘
  5. 美术培训
  6. 平面设计
  7. 联系方式
  8. site map

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

  • 临汾市脑卒中急救溶栓地图发布 2018-08-22
  • 少1人战世界杯!克罗地亚锋霸确认被开除 2018-08-22
  • 莎拉-布莱曼新专辑《追梦人》发行 打造奇妙视听盛宴 2018-08-15
  • 《中国教育报》电子版 2018-08-15
  • 人民网评:别再让“600瓶白酒”恶化政治生态 2018-08-12
  • 游戏代练在网吧里卖淫秽视频 被警方逮个正着 2018-08-12
  • 尼玛嘉措:红军走过的地方 2018-07-30
  • 有事没事扎针灸?别这样养生 2018-07-30
  • 延安时期中共领袖红色家风建设研究 2018-07-16
  • 河南宝丰:一位乡村工匠的“汝瓷梦” 2018-07-16
  • 835| 414| 783| 794| 388| 750| 279| 316| 214| 472|