网上教学
网络营销培训专家新川教育
   著名实战网络营销课程培训机构.
网络营销,淘宝培训课程优惠
简单形状绘制《HTML5系列教程18》

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

      友情链接

  1. 办公文秘
  2. 美术培训
  3. SEM培训
  4. UI设计
  5. PS图片处理
  6. 营销就业班
  7. 跨境电商
  8. 微信营销
  1. 开班信息
  2. 教学优势
  3. 师资介绍
  4. 资料下载
  5. 工作推荐
  6. 学员作品
  7. site map

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

福建31选7开奖时间
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-06-25
  • 海南省习近平新时代中国特色社会主义思想学习研究中心(第二批)招标公告 2019-06-25
  • 网友给包头市委书记留言获回复 共计8条 2019-06-23
  • Jeep推3款车型搭载国VI发动机 新增多项配置 2019-06-21
  • 李易峰观影两度感动落泪 2019-06-21
  • 卓别林回顾展:在他身上,你看到了多少自己的影子? 2019-06-19
  • 从经济数据看民生获得感 2019-06-15
  • 中国智能手机在东南亚受追捧 2019-06-12
  • 房企发债频现中止 行业集中度料提升 ——凤凰网房产北京 2019-06-11
  • 路上安全  警钟长鸣:宝马SUV闯红灯  十字路口被面包车顶翻 2019-06-11
  • 紫光阁中共中央国家机关工作委员会 2019-06-09
  • 为什么截留信马克的帖子?这还有摆事实讲道理存在吗? 2019-06-09
  • 宝宝鼻子不通气怎么办 通气好方法都在这! 2019-06-04
  • 探寻深圳的创新基因(壮阔东方潮 奋进新时代·庆祝改革开放40年) 2019-05-28
  • 遏制互联网恶性竞争,条款是否越细越好 2019-05-28
  • 全讯网下香港赛马会 七星彩走势图 360新快3吉林快3走势图 北京时时彩3分钟开奖 两码中特期期准码 浙江快乐彩论坛 香港赛马会投注网站 福利彩票现场直播开奖||www.tlldxu.com.cn/ 浙江体彩6+1走势图 重庆时时彩后二绝招 快速时时彩开奖 网络兼职赚钱 360网页版富豪炸金花 昨天贵州快三走势图带连线 北京pk10平台哪个好