使用HTML5 Canvas绘制直线或折线等线条的方法讲解

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含HTML5,Canvas等相关知识,佚名希望在学习及工作中可以帮助到您

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字符编码指令有所不同。

<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 id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
</body>
</html>

此时，我们使用支持html5的浏览器打开该页面，将会看到如下内容：
2016314110155998.png (455×321)

在html5中，canvas标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布，还需要我们自己使用JavaScript提供的canvas API编写相应的代码从而在这块画布上绘制出我们想要的图形。

备注：canvas标签体内的文字内容将会在不支持html5的浏览器中显示。如上述html代码所示，如果你的浏览器不支持html5的canvas标签，那么将会在canvas标签处显示文字「您的浏览器不支持

您可能想查找下面的文章:

相关文章

2018-12-03H5的服务器推送事件详解
2018-12-03h5怎样实现获取用户地理定位
2018-12-03h5中文件上传下载实例
2018-12-03Tkinter教程之Canvas篇(3)
2018-12-03如何使用HTML5中postMessage实现Ajax中的POST跨域问题的详细介绍
2018-12-03H5的web本地存储如何使用
2018-12-03怎样用 JavaScript 准确获取手机屏幕的宽度和高度？
2018-12-03HTML5学习笔记简明版（3）：新元素之hgroup,header,footer
2018-12-03HTML5各引擎显示效率比较
2018-12-03HTML5可以调用的iPhone传感器有哪些？