html5 Canvas绘制图形入门详解
html5，这个应该就不需要多作介绍了，只要是开发人员应该都不会陌生。html5是「新兴」的网页技术标准，目前，除IE8及其以下版本的IE浏览器之外，几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。除此之外，在移动浏览器市场上，众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛。html作为革命性的网页技术标准，再加上众多浏览器厂商或组织的鼎力支持，可以想见，html5将会成为未来网页技术的领头羊。
html5，说其是「新兴」的，其实也不算新了。毕竟，html5早在2008年其第一份正式草案就已经对外公布。从2008年算起，到现在也算是有些年头了。不过，到目前为止，对于大多数开发人员而言，仍然是「雷声大，雨点小」——听说html5的多，实际使用html5的却很少。
众所周知，html5中增加了许多新特性。在html5的众多特性中，Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏览器可以脱离Flash等第三方插件，直接在网页上显示图形或动画。
现在，我们就来为html5初学者介绍如何使用html5 Canvas绘制基本的图形。
首先，我们需要准备如下html基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas入门示例</title>
</head>
<body> </body>
</html>
上述代码是一个html5页面的基本代码模板。其中，第一行代码<!DOCTYPE html>是一个文档类型标签指令，这也是html5页面的标准文档类型指令，用于告诉浏览器「这是一个html5页面，请按照html5的网页标准来解析显示该页面」。第4行代码<meta charset="UTF-8">用于告诉浏览器「这个html5页面的字符编码为UTF-8」，这也是html5网页设置字符编码的标准写法。这与以往的html字符编码指令有所不同。
<!-- 以往的html字符编码指令如下 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
现在，我们就在包含上述代码的html文件中进行Canvas绘制图形的实例讲解。首先，我们在上述html代码的body部分添加如下canvas标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas入门示例</title>
</head>
<body> <!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas> </body>
</html>
此时，我们使用支持html5的浏览器打开该页面，将会看到如下内容：
canvas标签显示效果
在html5中，canvas标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布，还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。
备注：canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码所示，如果你的浏览器不支持html5的canvas标签，那么将会在canvas标签处显示文字「您的浏览器不支持canvas标签」。
作为「画家」的我们，首先需要熟悉我们手中的画笔，也就是JavaScript中的Canvas对象及其相关内容。
在html5中，一个canvas标签就对应一个Canvas对象，我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是，在JavaScript中，我们并不是直接操作Canvas对象，而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D，然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。
这就好像是每一张画布都对应一支画笔，要想在画布上绘画，我们就先要拿到对应的画笔，然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。现在，我们就先来尝试在JavaScript中拿到这支画笔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制线条入门示例</title>
</head>
<body> <!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas> <script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
}
</script>
</body>
</html>
如上述代码所示，我们可以使用Canvas对象的getContext()方法来获取CanvasRenderingContext2D对象。比较细心的读者应该注意到了：getContext()方法需要传入一个字符串——2d，获取到的CanvasRenderingContext2D对象的名称中也带有2D。这是因为，目前html5只支持2D绘图，但是在未来的html5中也可能支持3D或其他形式的绘图。届时，我们可能就需要使用getContext("3d")来获取CanvasRenderingContext3D对象并绘制3D图形了
html5 Canvas绘制图形入门详解的更多相关文章
- HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- HTML5 Canvas绚丽的小球详解
实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...
- HTML5 canvas绘制图形
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
随机推荐
- 试用vSphere 6（三）：安装vCenter 6（独立数据库）之：vCenter安装与配置
------------------------------------------ 一.VMware vSphere 6(RC版)安装配置系列文章: 1.试用vSphere 6(一):安装ESXi ...
- 2016全国研究生数学建模A题多无人机协同任务规划——基于分布式协同多旅行商MTSP遗传算法
MTSP问题是指:有Ⅳ个城市,要求旅行商到达每个城市各一次,且仅一次,并[旦 1到起点,且要求旅行路线最短.而多旅行商问题M个旅行商从同一个城市(或多个城市)出发.分羽走一条旅路线,且总路程缀短.有关 ...
- XAMPP端口占用启动不了
skype默认会占用80和443端口 如果在apache之前启动skype,apache就会启动不了了!! 解决办法很简单: 1. 先启动apache再启动skype,这样skype就会换其他的端口监 ...
- jQuery FileUpload等插件的使用实例
1.jQuery FileUpload 需要的js: jquery.js jquery.fileupload.js jquery.iframe-transport.js jquery.xdr-tran ...
- Linux之图形化shell------dialog
转自:Linux dialog详解(图形化shell) | 运维生存时间 对话 UNIX: 使用 shell 脚本创建好的图形应用程序---http://www.ibm.com/developerwo ...
- ios 引入第三方库 运行时找不到函数实现
今天引入webtrends 这个库,结果一直运行时找不到函数,纳闷了一下午! 后来发现,是other flag没有设置对,对于那些包含category用来扩展ios原始类型的库,链接的时候需要特别的链 ...
- java web 学习 --第二天（Java三级考试）
第一天的学习在这http://www.cnblogs.com/tobecrazy/p/3444474.html 2.jsp 基础知识 Jsp页面中的Java脚本主要有3部分:声明(Declaratio ...
- 【编程题目】输入一个单向链表，输出该链表中倒数第 k 个结点
第 13 题(链表):题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表的尾指针.链表结点定义如下: struct ListNode {int m_nKey;Lis ...
- curl命令 抓取网络数据相应头
curl --verbose --data "Password=123&Username=158101068&url=http://m.vancl.com/" & ...
- php生成对象的研究
<?php abstract class E{ protected $name; function __construct($name){ $this->name = $name; } a ...