利用HTML5中的Canvas绘制笑脸的代码

互联网 18-7-2

这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是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>

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

在我们开始之前，我必须告知您，上下文存储了两种颜色属性，一个用于画笔（stroke），一个用于填充（fill）。对于我们的笑脸，需要设置填充为黄色，画笔为黑色。

context.fillStyle = 'yellow';    context.strokeStyle = 'black';

context.beginPath();    context.arc(320, 240, 200, 0, 2 * Math.PI);    context.fill();    context.stroke();    context.closePath();

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();

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

利用HTML5中的Canvas绘制笑脸的代码

相关资讯

标签推荐