今天，你将学习一项称为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，这相当直截了当：
XML/HTML Code复制内容到剪贴板
- <!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 >标记，类似的，它是整个项目的基础，因为我们可以通过它来获取元素，执行变化。
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有几个不同的上下文，根据程序的目的，只需要一个二维的上下文就足够了，它将获得我们需要创建笑脸的所有绘图方法。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/htm5ctutorials/473494.html