名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
今天，您将学习一项称为Canvas（画布）的web技术，以及它和文档对象模型（通常被称为DOM）的关联。这项技术非常强大，因为它使web开发建设人员能够通过使用JavaScript访问和修改网页hTML网页元素。
现在您可能想知道为什么咱们需要大刀阔斧地使用JavaScript。简而言之，网页hTML和JavaScript是相互依存的，一些网页hTML组件，如canvas网页元素，并不能脱离JavaScript单独使用。毕竟，如果咱们不能在上面绘图，那canvas能派什么用处呢？
为了更好地理解这个概念，咱们一起通过一个示例项目来尝试画一个简单的笑脸。让咱们开始吧。
开始
首先创见一个新目录来保存您的项目相关站点文件，然后打开您最喜欢的文本编辑器或web开发建设工具。一旦您这样做了,您应该创见一个空的index.html和一个空的script.js,之后咱们将继续编辑。
接下来，咱们来修改index.html相关站点文件，这不会涉及很多东西，因为咱们项目的大部分具体代码将用JavaScript编写。咱们需要在网页hTML中做的是创见一个canvas网页元素和引用script.js，这相当直截了当：
- <!DOCTYPE html><body>
- <canvas id='canvas' width='640' height='480'></canvas>
- <script type='text/javascript' src='script.js'></script>
- </body></html>
这么解释，我使用一组标记< html >和< body>，这样，咱们可以通过body为文档添加更多的网页元素。抓住这个机会，我完成了一个id属性为canvas的640*480的canvas网页元素。
这个属性只是简单地为网页元素加上一个字符串，目的是为了唯一识别，稍后咱们将利用这个属性，在JavaScript相关站点文件中定位咱们的canvas网页元素。接下来，咱们再使用<script>标记引用JavaScript相关站点文件，它指定JavaScript的语言类型和script.js相关站点文件的路径。
操作DOM
如其名称“文档对象模型”，咱们需要通过使用另一种语言，相关调用接口访问网页hTML文档，在这里，咱们使用的语言是JavaScript。为此，咱们需要在内置文档对象上的布置一个简单引用。这个对象直接对应于咱们的< html >标记，类似的，它是整个项目的基础，因为咱们可以通过它来获取网页元素，执行变化。
- var canvas = document.getElementById('canvas');
还记得咱们如何使用id =“canvas”来定义一个canvas网页元素吗？现在咱们使用document.getElementById实用具体的方法，从网页hTML文档获取这个网页元素，咱们简单地传递匹配所需网页元素id的字符串。现在咱们已经获取了这个网页元素，接下来就可以用其进行绘画工作了。
为了使用canvas进行绘画，咱们必须操作它的上下文。令人惊讶的是，一个canvas不包含任何绘图的实用具体的方法或属性，但是它的上下文对象有咱们需要的所有实用具体的方法。一个上下文定义如下所示：
- var context = canvas.getContext('2d');
每一个canvas有几个不同的上下文，根据程序的目的，只需要一个二维的上下文就足够了，它将获得咱们需要创见笑脸的所有绘图实用具体的方法。
在咱们开始之前，我必须告知您，上下文存储了两种颜色属性，一个用于画笔（stroke），一个用于填充（fill）。对于咱们的笑脸，需要设置填充为黄色，画笔为黑色。
- context.fillStyle = 'yellow';
- context.strokeStyle = 'black';
设置完上下文所需的颜色后，咱们必须为脸画一个圆。不幸的是，上下文中没有圆的预定义实用具体的方法，因此咱们需要使用所谓的路径（path）。路径只是一系列的相连的直线和曲线，路径在绘图完成后关闭。
- context.beginPath();
- context.arc(320, 240, 200, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- context.closePath();
这样解释，咱们运用上下文开始一个新的路径。接下来，咱们在点(320、240)上创见一个半径为200像素的圆弧。最后两个具体参数指定构建圆弧的初始和最终角度，所依咱们传递0和2 *Math.PI，来创见一个完整的圆。最后，咱们运用上下文基于咱们已经设置的颜色进行填充并画出路径。
尽管关闭路径不是脚本的功能所必须的，但咱们还是需要关闭路径，这样就可以开始绘制笑脸中新的眼睛和嘴。眼睛可以通过同样的方式完成,每个眼睛需要较小的半径和不同的位置。但首先咱们必须记住设置填充颜色为白色。
- context.fillStyle = 'white';
- context.beginPath();
- context.arc(270, 175, 30, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- context.closePath();
- context.beginPath();
- context.arc(370, 175, 30, 0, 2 * Math.PI);
- context.fill();
- context.stroke();
- context.closePath();
以上是关于眼睛的所有具体代码。现在嘴巴很相似，但这次咱们不会填满圆弧，咱们的角度将配置为一个半圆。要做到这一点,咱们需要设置起始角度为零和结束角度为-1 * Math.PI。请记住,不要忘记将画笔的颜色设置为红色。
- context.fillStyle = 'red';
- context.beginPath();
- context.arc(320, 240, 150, 0, -1 * Math.PI);
- context.fill()
- context.stroke();
- context.closePath();
祝贺
干的不错。您已经完成了本教程，您做了一个很棒的笑脸，同时学习了更多关于Canvas、网页hTML、JavaScript，和文档对象模型的知识。如果您有任何问题,请留言。
关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,网页hTML5,Canvas网页hTML5教程实现获取地理位置信息并定位功能
源码下载：点此下载
