本文主要介绍了在HTML5中使用画布绘制笑脸教程。使用画布绘制是HTML5的基本功能。
今天，您将学习一种称为画布（画布）的Web技术及其与文档对象模型（通常称为DOM）的关联。这种技术非常强大，因为它允许Web开发人员使用Javaｓｃｒｉｐｔ访问和修改HTML元素。
现在您可能想知道为什么我们需要大幅度使用Javaｓｃｒｉｐｔ。简而言之，HTML和Javaｓｃｒｉｐｔ是相互依存的，一些HTML组件，如画布元素，不能单独使用Javaｓｃｒｉｐｔ。毕竟，如果我们不能使用它，那么画布的用途是什么呢
为了更好地理解这个概念，我们尝试通过一个示例项目画一个简单的笑脸。
开始
首先创建保存您的项目文件的一个新的目录，然后打开你最喜欢的文本编辑器或Web开发工具。一旦你这样做，你应该创建一个空文件和一个空的ｓｃｒｉｐｔ.js，然后我们将继续编辑。
接下来，我们要修改index.html文件，而不涉及很多东西，因为在我们的项目中的代码将用Javaｓｃｒｉｐｔ写的。我们需要做的是创建一个HTML Canvas元素和参考ｓｃｒｉｐｔ.js，这是很简单的：
xml代码将内容复制到剪贴板。
在这个解释中，我使用了一组标记，这样我们可以通过主体向文档添加更多的元素。为了抓住这个机会，我完成了画布id属性的640 * 480的画布元素。
此属性只是将字符串添加到元素中，以便唯一标识。后来，我们将使用此属性来定位我们的画布元素在Javaｓｃｒｉｐｔ文件。接下来，我们使用引用的Javaｓｃｒｉｐｔ文件，它指定的Javaｓｃｒｉｐｔ语言和类型的ｓｃｒｉｐｔ.js文件的路径。
操作DOM
例如它的名称文档对象模型；我们需要通过使用另一种语言调用另一个接口来访问HTML文档。我们在这里使用的语言是Javaｓｃｒｉｐｔ。为此，我们需要为内置文档对象安排一个简单的引用。这个对象与我们的标记直接相关，同样地，它是整个项目的基础，因为我们可以通过它获得元素并执行更改。
xml代码将内容复制到剪贴板。
VaR的画布document.getelementbyid（'canvas）；
记得我们如何使用ID = canvas定义一个canvas元素现在我们使用的document.getelementbyid方法从HTML文档中得到这种元素，我们只是通过匹配所需的元素的字符串，ID.，现在我们有这个元素，我们可以用它来画。
为了使用画布绘制，我们必须操作它的上下文。令人惊讶的是，画布不包含任何绘图的方法或属性，但是它的上下文对象拥有我们需要的所有方法：
xml代码将内容复制到剪贴板。
VaR上下文= canvas.getcontext（二维的）；
每个画布有几个不同的上下文。根据程序的目的，只有二维上下文才足够。它将获得创建笑脸所需的所有绘图方法。
在开始之前，我必须告诉您，上下文存储两个颜色属性，一个用于笔划，一个用于填充。对于我们的笑脸，您需要设置黄色填充，而画笔是黑色的。
xml代码将内容复制到剪贴板。
context.fillstyle ='；
context.strokestyle =；
在设置上下文所需的颜色之后，我们必须为脸部画一个圆，不幸的是，在上下文中没有循环预定义的方法，所以我们需要使用所谓的路径，路径只是一系列的连接线和曲线，路径在绘制完成后关闭。
xml代码将内容复制到剪贴板。
Context.beginPath（）；
context.arc（320, 240, 200，0, 2×数学。PI）；
Context.fill（）；
context.stroke（）；
Context.closePath（）；
在这种方式中，我们使用上下文来开始一个新的路径。接下来，我们创建一个点的半径为200像素的圆弧（320, 240），后两个参数指定的初始和最终的建筑的弧角，所以我们通过0和2×math.pi创建一个完整的圆。最后，我们使用背景填充和绘制路径的基础上，我们已经设置颜色。
虽然脚本不需要关闭路径，但我们仍然需要关闭路径，这样我们就可以开始在微笑的脸上画出新的眼睛和嘴巴。
xml代码将内容复制到剪贴板。
context.fillstyle =白色；
Context.beginPath（）；
context.arc（270, 175, 30，0, 2×数学。PI）；
Context.fill（）；
context.stroke（）；
Context.closePath（）；
Context.beginPath（）；
context.arc（370, 175, 30，0, 2×数学。PI）；
Context.fill（）；
context.stroke（）；
Context.closePath（）；
以上是关于眼睛的代码。现在嘴很相似，但这一次我们不会填满弧角，我们将被配置为一个半圆。要做到这一点，我们需要设置起始角为零和端角- 1 * math.pi.remember，别忘了设置画笔的颜色为红色。
xml代码将内容复制到剪贴板。
context.fillstyle ='；
Context.beginPath（）；
context.arc（320, 240, 150，0，1×数学。PI）；
Context.fill（）
context.stroke（）；
Context.closePath（）；
祝贺
它完成得很好，你已经完成了这个教程，你已经做了一个很棒的笑脸，你可以学到更多关于画布，HTML，Javaｓｃｒｉｐｔ和文档对象模型，如果你有任何问题，请留言。