今天，你将学习一项称为Canvas（ 画布 ）的web技 术 ，以及它和文档 对象模型 （通常被称为DOM）的关联。这项技术非常强大，因为它使web开发人员能够通过使用JavaScript访问和修改HT ML 元素。
现在你可能想 知道 为什么我们需要大刀阔斧地使用JavaScript。简而言之，HTML和JavaScript是相互依存的，一些HTML组件，如canvas元素，并不能脱离JavaScript单独使用。毕竟，如果我们不能在上面绘图，那canvas能派什么用处呢？
为了更好地理解这个概念，我们一起通过一个示例项目来尝试画一个 简单 的笑脸。让我们 开始 吧。
开始
首先创建一个新目录来保存你的项目文件，然后打开你最喜欢的文本编辑器或web 开发工具 。一旦你这样做了,你 应该 创建一个空的index.html和一个空的script.js,之后我们将继续编辑。
接下来，我们来修改index.html文件，这不会涉及很多东西，因为我们项目的大部分代码将用JavaScript编写。我们需要在HTML中做的是创建一个canvas元素和引用script.js，这相当直截了当：
&nbs p;
XM L/HTML Code 复制内容到剪贴板
<!DOCTY PE html > < body > < canvas id = 'canvas' width = '640' h ei ght = '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 >标记，类似的，它是整个项目的基础，因为我们可以通过它来 获取元素 ，执行变化。
XML/HTML Code 复制内容到剪贴板
VAR canvas = document .getElementById('canvas');
还记得我们如何使用id =[canvas]来定义一个canvas元素吗？现在我们使用document.getElementById方法，从HTML文档获取这个元素，我们简单地传递匹配所需元素id的字符串。现在我们已经获取了这个元素，接下来就可以用其进行绘画工作了。
为了使用canvas进行绘画，我们必须操作它的上下文。令人惊讶的是，一个canvas不包含任何绘图的方法或属性，但是它的上下文对象有我们需要的所有方法。一个上下文定义如下所示：
XML/HTML Code 复制内容到剪贴板
var context = canvas .getContext('2d');
每一个canvas有几个不同的上下文，根据程序的目的，只需要一个二维的上下文就足够了，它将获得我们需要创建笑脸的所有绘图方法。
在我们开始之前，我必须告知您，上下文存储了两种颜色属性，一个用于 画笔 （ stroke ），一个用于填充（fill）。对于我们的笑脸，需要设置填充为黄色，画笔为黑色。
XML/HTML Code 复制内容到剪贴板
context.fillStyle = 'yellow' ; context.strokeStyle = 'black' ;
设置完上下文所需的颜色后，我们必须为脸画一个 圆 。不幸的是，上下文中没有圆的预定义方法，因此我们需要使用所谓的路径（path）。路径只是一 系列 的相连的 直线 和曲线，路径在绘图完成后关闭。
XML/HTML Code 复制内容到剪贴板
context.be gin Path(); context.arc(320, 240, 200, 0, 2 * ;m ath.PI); context.fill(); context.stroke(); context.closePath();
这样解释，我们运用上下文开始一个新的路径。接下来，我们在点(320、240)上创建一个 半 径为200像素的圆弧。最后两个参数指定构建圆弧的初始和最终角度，所以我们传递0和2 *Math.PI，来创建一个完整的圆。最后，我们运用上下文基于我们已经设置的颜色进行填充并画 出路 径。
尽管关闭路径不是脚本的功能所必须的，但我们还是需要关闭路径，这样就可以开始 绘制 笑脸中新的 眼睛 和嘴。眼睛可以通过同样的方式完成,每个眼睛需要较小的半径和不同的位置。但首先我们必须记住设置填充颜色为 白色 。
XML/HTML Code 复制内容到剪贴板
context.fillStyle = 'wh IT e' ; 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。请记住,不要忘记将画笔的颜色设置为 红色 。
XML/HTML Code 复制内容到剪贴板
@H_611_ 406 @ context.fillStyle = ' red ' ; context.beginPath(); context.arc(320, 240, 150, 0, -1 * Math.PI); context.fill() context.stroke(); context.closePath();祝贺
干的不错。你已经完成了本教程，你做了一个很棒的笑脸，同时学习了更多关于Canvas、HTML、JavaScript，和文档对象模型的知识。如果你有任何问题,请留言。
总结
以上是 为你收集整理的 利用HTML5中的Canvas绘制一张笑脸的教程 全部内容，希望文章能够帮你解决 利用HTML5中的Canvas绘制一张笑脸的教程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用HTML5中的Canvas绘制一张笑脸的教程的详细内容...