网上教学
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
简单形状绘制《HTML5系列教程18》

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

今日福建31选7开奖结果:简单形状绘制《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. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 联系方式
  7. site map

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

粤公网安备 44011302001949号
  • 在战火中诞生的党中央机关报(连载六) 2019-03-15
  • 上海浦东:高行同心圆 打造“指尖上的党建阵地” 2019-03-11
  • 郭树清:收益率超6%要打问号 让庞氏骗局无所遁形 2019-03-11
  • 有理讲理,不要诬蔑。 2018-12-03
  • 浙大科研团队15载攻克歼20等飞机装配系列难题 2018-12-03
  • “民主”韩非子叫“亲下以谋上”投机,中国是义主《国语》“立义治律万物皆作,分均天才万物熙熙。” 2018-12-03
  • 临汾市脑卒中急救溶栓地图发布 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
  • 307| 593| 708| 948| 289| 833| 461| 432| 485| 383|