HTML5帆布教程：简介-js教程-PHP中文网

钥匙要点

画布渲染上下文

入门

了解帆布坐标系

绘图线

如何使用HTML5帆布对对象进行动画化？第二。每个redraw称为帧，对对象的属性的更改是在框架之间进行的，以产生运动的幻觉。这通常是使用requestAnimationFrame（）方法进行的。

首页

web前端

js教程

HTML5帆布教程：简介

Christopher Nolan

Feb 22, 2025 am 09:06 AM

HTML5帆布教程：简介

钥匙要点

> HTML5画布是一项强大的技术，它允许开发人员使用JavaScript在浏览器中直接绘制图形并创建动画。帆布元素使用宽度和高度属性在HTML代码中定义，其真实功率通过HTML5 Canvas API利用。 HTML5帆布功能是互动的，能够由所有主要浏览器提供动画，灵活和支持。它可用于一系列应用程序，包括游戏，广告，数据表示，教育和培训以及艺术与装饰。
> HTML5画布具有独特的坐标系，该系统将原点放在画布的左上角。 X坐标向右增加，Y坐标向画布的底部增加。该系统没有可见的负点，因此使用负坐标点定位的对象不会出现在页面上。
> 加载玩家… 画家工具包中最重要的工具之一是它们的画布。它使他们可以自由地以几乎无限的变化和组合来表达各种感觉，印象，思想等。自由只能受到两件事的限制 - 他们的技能水平和想象力。

。

什么是html5 canvas？

画布元素是使用宽度和高度属性在HTML代码中定义的元素。但是，画布元素的真正力量是通过利用HTML5帆布API来实现的。该API是通过编写可以通过完整的绘图功能访问画布区域的JavaScript来使用的，从而允许动态生成的图形。

html5画布有什么好处？

这是您可能要考虑学习使用HTML5的Canvas功能的一些原因：

互动性。画布是完全互动的。它可以通过侦听键盘，鼠标或触摸事件来响应用户的操作。因此，开发人员不仅限于静态图形和图像。
>
>动画。画布上绘制的每个对象都可以动画。从简单的弹跳球到复杂的前进和逆运动学，这允许创建所有级别的动画。

灵活性。开发人员几乎可以使用画布创建任何东西。它可以显示线条，形状，文本，图像等 - 有或没有动画。另外，还可以在画布应用程序中添加视频和/或音频。
>
>浏览器/平台支持。 HTML5帆布都由所有主要浏览器提供支持，并且可以在包括台式机，平板电脑和智能手机在内的各种设备上访问。
>
受欢迎程度。帆布的受欢迎程度正在迅速稳定增长，因此不乏可用的资源。
这是一个网络标准。与Flash和Silverlight不同，Canvas是HTML5的一部分开放技术。尽管并非所有浏览器都实现了其所有功能，但开发人员可以确定帆布将无限期地存在。
>开发一次，到处奔跑。 HTML5画布提供了很好的可移植性。与Flash和Silverlight不同，一旦创建了Canvas应用程序几乎可以在任何地方运行 - 从最大的计算机到最小的移动设备。
免费且可访问的开发工具。创建HTML5 Canvas应用程序的基本工具只是浏览器和一个好的代码编辑器。另外，还有许多很棒的免费图书馆和工具来帮助开发高级帆布开发的开发人员。

您可以使用HTML5 Canvas创建哪些应用程序？
>
好，画布很棒。但是到底可以使用它呢？让我们看看。

游戏。 HTML5画布的功能集是生产各种2D和3D游戏的理想候选人。

广告。 HTML5画布是基于闪光灯的横幅和广告的绝佳替代品。它具有吸引买家注意的所有需要的功能。

艺术与装饰。具有一点点的想象力和画布各种颜色，渐变，图案，透明度，阴影和剪裁功能，可以绘制各种艺术和装饰图形。
>现在我们知道为什么要学习帆布，让我们看一下HTML5画布的基础知识以及如何开始使用它。
画布渲染上下文

每个HTML5画布元素都必须具有a上下文。上下文定义了您将使用的HTML5帆布API。 2D上下文用于绘制2D图形和操纵位图图像。 3D上下文用于3D图形创建和操纵。后者实际上称为WebGL，它基于OpenGles。
>
入门

开始使用帆布，您只需要一个代码编辑器和带有HTML5帆布支持的浏览器。我使用Sublime Text和Google Chrome，但您可以使用任何您想要的任何东西。
>
我们的html开始看起来像这样：
>
```
<canvas id="exampleCanvas" width="500" height="300">

 
 <p>Your browser doesn’t currently support HTML5 Canvas. 
 Please check caniuse.com/#feat=canvas for information on 
 browser support for canvas.</p>

 

</canvas>
```
登录后复制
登录后复制
这是我们的JavaScript，我们可以在HTML页面的底部包含在内：
```
var canvas = document.getElementById('exampleCanvas'),
 context = canvas.getContext('2d');

 // code examples will continue here...
```
登录后复制
登录后复制
默认情况下，浏览器会创建宽度为300像素和150像素的帆布元素，即使在HTML中未指定这些元素。您可以通过指定宽度和高度来更改尺寸，就像我在HTML中所做的那样。
>
>还请注意，我们已经在JavaScript中使用了Canvas一个ID属性。最后，如果您愿意，可以使用CSS添加边框，使画布通过薄框架可见。这不是必需的，它被用作视觉辅助，以便我们看到画布元素的边界。
请注意，在开口和关闭
标签之间，我添加了如果浏览器不支持画布，则将显示这些内容。这几乎可以是较旧浏览器支持的任何类型的内容。
>
> JavaScript以两行开头。在第一行中，我们创建一个通过其ID缓存我们的画布元素的变量。第二行创建了一个变量（上下文），该变量（上下文）使用getContext（）函数引用画布的2D上下文。我们将使用上下文变量访问所有帆布绘图功能和属性。
>
>准备好帆布，我们可以开始尝试使用帆布API。但是在此之前，让我们澄清一下画布功能的更多方面。

> html5帆布元素尺寸与图形尺寸
除了画布元素的宽度和高度属性外，您还可以使用CSS设置帆布元素的大小。但是，用CSS对画布元素进行调整与设置元素的宽度和高度属性不同。这是因为画布实际上具有两种尺寸：元素本身的大小和元素的绘图表面的大小。

设置元素的宽度和高度属性时，您可以设置元素的大小和元素绘图表面的大小；但是，当您使用CSS尺寸大小画布元素时，您仅设置元素的尺寸而不是绘图表面。当帆布元素的大小与其图表面的大小不符时，浏览器会缩放图表以适合元素。
因此，最好将Canvas Element的宽度和高度属性用于大小元素而不是使用CSS，这是一个好主意。

了解帆布坐标系
在2D空间中，使用X和Y坐标引用位置。 X轴水平延伸，Y轴垂直延伸。该中心的位置x = 0，y = 0，也可以表示为（0，0）。这种定位对象的定位方法（用于数学中）被称为笛卡尔坐标系。但是，画布坐标系将原点放置在画布的左上角，x坐标向右增加，y坐标朝向画布的底部。因此，与标准的笛卡尔坐标空间不同，画布空间没有明显的负点。使用负坐标不会导致您的应用程序失败，但是使用负坐标点定位的对象不会出现在页面上。

>基本画布示例如前所述，HTML5画布让您创建多种类型的对象，包括线，曲线，路径，形状，文本等。在示例中，您可以看到其中的某些对象实际上是如何绘制的。我不会在帆布API上进行广泛的详细信息；这些只是一些容易帮助您了解帆布如何工作的感觉。
>
绘图线

绘制一条线，我们使用四个帆布API方法。我们从BeginPath（）方法开始，该方法指示浏览器准备绘制新路径。接下来，我们使用Moveto（X，Y）方法来设置该行的起点。然后lineto（x，y）方法设置了终点，并通过连接两个点来绘制线路。
在这一点上，该线将被绘制，但仍然是看不见的。为了使其可见，我们使用stroke（）方法显示默认黑色的行。

请参见codepen上的sitepoint（@sitepoint）的笔帆布线示例。

绘制矩形

要绘制矩形，我们可以使用fillRect（x，y，width，高度）方法来设置坐标和尺寸，以及填充属性来设置填充颜色。
<canvas id="exampleCanvas" width="500" height="300">  <p>Your browser doesn’t currently support HTML5 Canvas. Please check caniuse.com/#feat=canvas for information on browser support for canvas.</p>  </canvas>
登录后复制
登录后复制
。

请参见codepen上的sitepoint（@sitepoint）的笔帆布矩形示例。

请注意，矩形位于左上角附近。
>
绘制文本
var canvas = document.getElementById('exampleCanvas'), context = canvas.getContext('2d'); // code examples will continue here...
登录后复制
登录后复制
>要在画布上绘制文本，我们可以使用fillText（字符串，x，y）以及字体属性来设置文本的字体，大小和样式（类似于CSS中的字体速记）。
>

请参阅codepen上的sitepoint（@sitepoint）的笔帆布文本示例。

>您应该知道，尽管使用HTML5 Canvas API简单绘图很容易，但是创建复杂的形状和动画需要一些数学和物理知识。关于该主题的最好的书之一是带有JavaScript的Foundation HTML5动画。这本书是学习将事物从简单到复杂的动画移动的绝佳资源。
>
在哪里可以了解更多？
>
如果您想在这里学习，有一些资源：
- >
加快画布开发

>使用“ RAW” HTML5 CANVAS API可能是一项繁琐的工作。这就是为什么您可以很好地学习它可以切换到一个可以加快速度并使您的画布开发变得更加容易的好帆布库时的好主意。
>
以下是一些流行的选择：
>加快HTML5画布开发的另一种方法是将Adobe Illustrator的Ai-> Canvas插件使用。您可以在SitePoint上的本文中找到插件的概述。
>
结论
就是这样。我希望此介绍性的HTML5 Canvas教程为您提供了一个很好的起点，可以继续学习和探索这项强大的技术。
关于HTML5画布
的常见问题（常见问题解答）
> SVG和HTML5 Canvas？
SVG（可扩展的向量图形）和HTML5帆布是用于创建图形的Web技术的什么区别。但是，它们的方法和用例有所不同。 SVG是一种基于向量的方法，其中每个绘制的形状都被记住为对象。如果更改对象的属性，则浏览器可以自动重新渲染场景。 SVG非常适合交互式图形和元素动画。另一方面，HTML5画布是基于像素的。一旦绘制形状，系统就会忘记。如果其属性更改，则必须与整个场景一起重新绘制。这使得帆布非常适合图形密集型游戏或诸如照片编辑软件之类的应用程序。
>如何将文本添加到帆布？
>将文本添加到画布中很简单。您可以使用fillText（text，x，y）方法，其中文本是要编写的字符串，而x和y是文本启动的坐标。您还可以使用字体和填充属性自定义文本的字体，尺寸和颜色。

>我可以使用HTML5画布进行游戏开发吗？它的基于像素的本质使其适合于在浏览器中平稳运行的复杂和图形密集型游戏。但是，对于3D游戏，也使用帆布API的WebGL由于其硬件加速度功能而成为一个更好的选择。

如何使用HTML5 Canvas？提供了几种绘制形状的方法。例如，要绘制矩形，您可以使用fillRect（x，y，width，高度）方法。要绘制一个圆圈，您可以使用弧（X，Y，RADIUS，Startangle，disgangle）方法。您还可以使用路径来绘制复杂的形状。
>
如何使用HTML5帆布对对象进行动画化？第二。每个redraw称为帧，对对象的属性的更改是在框架之间进行的，以产生运动的幻觉。这通常是使用requestAnimationFrame（）方法进行的。

>我可以与在帆布上绘制的对象进行交互？
与SVG不同，HTML5画布一旦绘制对象就不记得它们。这意味着您不能直接将事件处理程序附加到他们。但是，您可以通过跟踪javaScript中对象的属性并在发生交互时重新绘制画布来实现交互。使用Todataurl（）方法将画布的内容保存为图像。此方法返回包含由类型参数指定的格式表示图像表示的数据URL（默认为png）。

我如何清除帆布？
您可以清除整个整个使用透明处理（x，y，宽度，高度）方法的画布。要清除整个画布，您可以将x和y设置为0，将宽度和高度设置为帆布的宽度和高度。
>
我可以在所有浏览器中使用HTML5画布吗？在所有现代浏览器中都支持帆布，包括Chrome，Firefox，Safari，Opera和Edge。但是，Internet Explorer 8或更早的Internet Explorer中不支持它。
>我如何处理HTML5 Canvas中的错误？
>
>通常使用JavaScript中的try-catch块来完成HTML5画布中的错误处理。但是，由于画布是低级API，因此不提供详细的错误消息。因此，调试可能具有挑战性，并且通常涉及大量的反复试验。
>