单形状绘制《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中微笑表情绘制方法效果预览

日常生活中可以见到很多不规则的图形，你可以想到些什么图形呢？大家可以尝试一下利用已经学了的知识把自己想到的一些简单形状绘制出来。祝大家：身体健康、生活愉快！

orketing独家整理，转载注明来源

从“神经猫”开始，HTML5的风暴只用半年时间便席卷了整个移动互联网行业，让本就躁动的互联网再起波澜。对于H5的未来，不少业界人士都有着较高的期待，但唱衰的也大有人在，即便HTML5标准的定稿也没有使这样的情况有所好转。那么，对于H5人们分歧的焦点在哪？又都有怎样的见解？小编根据最近的各家言辞，整理了目前讨论最多的问题，进行了一场小PK。

一：HTML5固定标准VS动态标准

HTML5标准公布的意义在于制定了一个新的规范，建立了一个统一的平台。未来，借助HTML5技术，开发者可快速开发各种移动互联网应用，有助于在移动智能终端方面摆脱iOS、安卓、winphone等原生态应用的垄断与限制，对此，业界反应普遍乐观。

但争执的焦点在于，W3C(万维网联盟)选用的是固定的标准，这就让许多业界人士不满，在此之前，W3C就因为与WHATWG（网页超文本应用技术工作小组）“理念不同”而分道扬镳。WHATWG认为互联网的未来是很难预测的，将来会发生什么样的变化或者诞生什么样的事物，都是不可获知，而如今就用这一固定的标准去推动H5的发展，显然不太合理。在其看来，未来 HTML5 想得到真正的发展，核心问题并不是标准哪天定稿亦或是浏览器性能不足，关键在于标准的持续改进和生态建设。

当然，这个争论涉及到各大巨头间的商业竞争。无论如何，HTML5标准的定稿，对推动H5发展是显而易见的。

二：Web App VS 原生App

要说H5的发展对谁冲击最严重，原生App首当其冲。从苹果手机为代表的智能手机揭开移动互联网时代的序幕开始，原生App大行其道，在很大程度上扮演着移动互联网的入口角色。但系统平台间的格局以及版本的差异，却掣肘原生App的发展，从而形成一个个以系统为中心的信息孤岛，这些都是与标榜自由、开放的互联网精神背道而驰的。

HTML 5之所以一经提出便广受业界推崇，甚至被认为是移动互联网领域改朝换代的利器，很大原因就在于其设计之初就确立的开放原则，基于此原则的兼容、实用与跨平台性，能将App的中心从系统改为用户，打破封闭格局，更好地服务于用户。

H5理想很美好，现实却很残酷。不可否认的是我们已经习惯了iOS与Android生态系统的固定模式。从手机界面直击点击图标进入应用被认为是最有效的方式。而H5应用进入模式却需要以浏览器或超级App等第三方为跳板，方能进入web App界面。无疑，这样的操作流程和用户体验难以让人接受，H5依旧任重而道远。

三：流量模式VS下载模式

HTML5无端免下载的特性决定了HTML5游戏在推广方面具有先天的优势，用户进入游戏进行体验的门槛更低。但是，流量模式运营的产品要基于大量的浏览量作为基础，并且在捕获用户方面是“间接”的，而用户体验后，将其继续留下的可能性要远低于下载模式的原生APP。而基于下载模式，游戏产品还可以进入Appstore市场，留下排名、评分、还有相对成熟的渠道来吸引用户。

此外，H5目前主要的渠道是浏览器，较单一的渠道形式使得这种流量模式受浏览器厂商的影响大，一旦浏览器出现问题，那意味着所有基于浏览器平台的游戏和应用都将受到影响。

四：成本VS性能

H5受欢迎的一个因素是其远低于原生应用的成本。大多数浏览器都有着相同的运行方式，一个应用几乎可以在所有浏览器上运行，不像限定于只能在某一系统下运行的原生应用。并且，HTML5还允许不断更新，开发者不需要再将新应用提交给应用商店等待批准。每次用户登录到该web应用时，都将获得应用最新版本。这些都让开发者节省了大量的时间和资金。

相对Web应用，原生应用最大的优势就是可以访问设备中的所有功能，运行的速度更快、性能更高，而且可以启用优秀的离线处理和存储能力。

五：H5游戏，机遇VS挑战

一只表情贱贱的嘚瑟白猫在朋友圈中的疯狂刷屏，让人们第一次认识到H5游戏的魅力。随后，众多HTML5小游戏相继在微信朋友圈中蹿红。使得很多电商和传统行业的厂商纷纷借助HTML5小游戏进行产品营销，以增强广告的趣味性。这一切，让开发者们看到了H5游戏在移动端的广阔前景。他们期望借鉴PC端社交游戏向网页游戏转变的经验，尝试将极其轻度的HTML5游戏转变为强用户关系的社交游戏。另外，开发者甚至尝试将HTML5游戏开发成依托浏览器的重度网页游戏，让玩家免于下载安装即可体验到大型重度移动端网页游戏。而飞速发展的手机硬件和网络速度为这一实现提供了物质基础。

但这些都还只是业界人士的遐想，从目前来看，行业内在H5游戏的跟进力度明显不足，现象级产品也迟迟未见。从“神经猫”之后，就再未出现让市场为之震动的产品。由于现阶段H5游戏的商业化模式还不成熟，因而鲜有公司明确表示要着手向重度研发，H5游戏更多还是在作为一种营销工具，发挥其传播速度和范围方面的优势。

六：生态缺陷VS巨头涌入

目前H5不被看好的一个原因在于其生态圈的建设还未完成，生态缺陷让许多希望转入H5行业的开发者望而却步。对于H5而言，浏览器厂商的支持一直是其得以发展的关键，但来自MAMA工具分析，完全符合W3C标准的只有4.13%的网站，其他50%的网站虽然都在HTML中标示自己符合W3C标准，但实际上在具体网站建设中很少严格按照标准执行。此外，被大家寄于厚望的超级 APP也没有成为下一个机遇，微信的严格限制给H5开发者们浇了一盆冷水。

H5生态圈的建设虽不是一朝一夕可完成的，但各大互联网巨头的涌入无疑会加快这一进程。像百度推出了“轻应用”概念，并向开发者和企业推出了各种技术开放接口；微信发布JS SDK，QQ浏览器也在进行网页应用的开放；阿里、360、搜狐等也是频频出手H5领域。而对于企业和开发者们来说，借助巨头的平台，开发更适合该平台的轻应用能为自己带来更多的流量和资源，实现对客户更好的对接。随着参与者的不断增加，H5生态圈的建设也将逐渐完善，但这仍是一个长期的工程。

总结

在以上对比中，似乎H5并不占据上风，但不要忘了，H5应用才刚兴起。与早已成熟的原生应用本就没有太多的可比性。再者，H5的出现也不是以消灭原生为目的。两者各有所长，就如有些开发者为了使H5更好地融入到当下生态系统中，主动将原生APP内嵌入webview访问web页面成为通行做法，用HTML5开发原生APP也早不是新鲜事。并且HTML5技术的进一步发展解决了原生APP生态的一些痼疾，例如APP的“孤岛效应”。

总的来说，HTML5的发展是适应时代大势，只是目前现实中还未有一款爆品来为其正名，从而带动整个行业前行。一切都需要各家努力完善新的移动生态圈，才会迎来H5真正的春天。