html2canvas教程_HTML5 Canvas教程：简介

html2canvas教程

对CSS动画感兴趣？ 查阅由Web开发专家Donovan Hutchinson提供的有关使用CSS创建动画的完整课程，有关CSS Transitions和Keyframes动画的完整课程，适用于SitePoint成员。 有关HTML5画布动画的示例，请观看下面HTML5 Canvas插图，这是我们HTML5 Canvas mini 动画入门课程中的一个视频。

正在加载播放器…

画家工具包中最重要的工具之一就是画布。 它使他们可以自由地以几乎无限的变化和组合来表达各种感觉，印象，想法等。 而自由只能受到两方面的限制-他们的技能水平和想象力。

Web开发世界中的情况与此类似。 随着HTML5及其功能强大的规范的不断发展，Web开发人员已经具有执行过去无法完成的工作的能力。 借助HTML5 Canvas技术，现在完全可以在浏览器中直接绘制图形和创建动画。

什么是HTML5 Canvas？

canvas元素是HTML代码中使用width和height属性定义的元素。 但是，canvas元素的真正功能是通过利用HTML5 Canvas API来实现的。 通过编写JavaScript可以使用此API，该JavaScript可以通过全套绘图功能访问画布区域，从而可以动态生成图形。

HTML5 Canvas有何优点？

您可能需要考虑学习使用HTML5的画布功能的一些原因：

• 互动性。 画布是完全交互式的。 它可以通过侦听键盘，鼠标或触摸事件来响应用户的操作。 因此，开发人员不仅限于静态图形和图像。
• 动画。 画布上绘制的每个对象都可以设置动画。 从简单的弹跳球到复杂的正反运动学 ，这都可以创建所有级别的动画。
• 灵活性。 开发人员可以使用画布创建几乎所有内容。 它可以显示线条，形状，文本，图像等，带有或不带有动画。 另外，还可以将视频和/或音频添加到画布应用程序。
• 浏览器/平台支持。 所有主流浏览器都支持HTML5 Canvas，并且可以在台式机，平板电脑和智能手机等各种设备上进行访问。
• 人气。 画布的受欢迎程度正在Swift稳定地增长，因此不乏可用资源。
• 这是一个网络标准。 与Flash和Silverlight不同，Canvas是HTML5的一部分的开放技术。 尽管不是所有浏览器都实现了所有功能，但是开发人员可以确定canvas会无限期地存在。
• 一次开发，随处可见。 HTML5 Canvas提供了很好的可移植性。 创建后，与Flash和Silverlight不同，画布应用程序几乎可以在任何地方运行-从最大的计算机到最小的移动设备。
• 免费和可访问的开发工具。 创建HTML5 canvas应用程序的基本工具只是浏览器和良好的代码编辑器。 此外，还有许多出色的免费库和工具可帮助开发人员进行高级画布开发。

您可以使用HTML5 Canvas创建哪些应用程序？

好，帆布很棒。 但是它到底能用来做什么呢？ 让我们来看看。

• 赌博。 HTML5 Canvas的功能集是制作各种2D和3D游戏的理想选择。
• 广告。 HTML5 Canvas可以很好地替代基于Flash的横幅和广告。 它具有吸引买家注意力的所有必要功能。
• 数据表示。 HTML5可以从全局数据源中收集数据，并使用它来生成具有canvas元素的视觉吸引力和交互式图形和图表。
• 教育和培训。 HTML5 canvas可用于结合文本，图像，视频和音频来产生有效且有吸引力的学习体验。
• 艺术和装饰。 借助一点点的想象力和画布的各种颜色，渐变，图案，透明度，阴影和剪切功能，可以绘制各种艺术和装饰性图形。

现在我们知道了为什么要学习画布，让我们看一下HTML5 Canvas的基础知识以及如何开始使用它。

画布渲染上下文

每个HTML5 canvas元素都必须具有一个上下文 。 上下文定义了您将使用HTML5 Canvas API。 2d上下文用于绘制2D图形和处理位图图像。 3d上下文用于3D图形创建和操纵。 后者实际上称为WebGL ，它基于OpenGL ES 。

入门

要开始使用画布，您只需要一个代码编辑器和一个支持HTML5画布的浏览器。 我使用Sublime Text和Google Chrome，但您可以随意使用。

我们开始HTML将如下所示：

<canvas id="exampleCanvas" width="500" height="300">

  <!-- OPTION 1: leave a message here if browser doesn't support canvas -->
    <p>Your browser doesn’t currently support HTML5 Canvas. 
    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.</p>

  <!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
                 if the browser doesn't support canvas -->

</canvas>

这是我们JavaScript，可以将其包含在HTML页面的底部：

var canvas = document.getElementById('exampleCanvas'),
    context = canvas.getContext('2d');

    // code examples will continue here...

默认情况下，即使未在HTML中指定，浏览器也会创建宽度为300像素，高度为150像素的canvas元素。 您可以通过指定width和height来更改大小，就像我在HTML中所做的那样。

还要注意，我们为canvas提供了一个id属性，该属性将在JavaScript中使用。 最后，如果需要，可以使用CSS添加边框以使画布通过细框架可见。 这不是必需的，它用作我们查看画布元素边界的视觉辅助。

注意，在开始和结束<canvas>标签之间，我添加了如果浏览器不支持canvas时将显示的内容。 这几乎可以是旧版浏览器支持的任何类型的内容。

JavaScript以两行开头。 在第一行中，我们创建一个变量，该变量通过其ID缓存画布元素。 第二行创建一个变量（ context ），该变量使用getContext()函数引用画布的2D上下文。 我们将使用context变量来访问所有画布绘制功能和属性。

准备好我们的画布后，我们就可以开始尝试Canvas API了。 但是在此之前，让我们澄清一下画布功能的其他方面。

HTML5画布元素大小与绘图表面大小

除了canvas元素的width和height属性，您还可以使用CSS设置canvas元素的大小。 但是，使用CSS调整画布元素的大小与设置元素的width和height属性是不同的。 这是因为画布实际上具有两种尺寸：元素本身的尺寸和元素绘图表面的尺寸。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

设置元素的width和height属性时，既要设置元素的大小，又要设置元素绘图表面的大小。 但是，当您使用CSS调整画布元素的大小时，您只能设置元素的大小，而不能设置绘图表面。 当画布元素的大小与其绘图表面的大小不匹配时，浏览器会缩放绘图表面以适合该元素。

因此，最好使用canvas元素的width和height属性来调整元素的大小，而不是使用CSS。

了解画布坐标系

在2D空间中，使用X和Y坐标引用位置。 X轴水平延伸，Y轴垂直延伸。 中心的位置x = 0和y = 0 ，也可以表示为(0, 0) 。 数学中使用的这种对象定位方法称为笛卡尔坐标系 。

但是，“画布”坐标系将原点放置在画布的左上角，其中X坐标向右增加，Y坐标向画布的底部增加。 因此，与标准的笛卡尔坐标空间不同，画布空间没有可见的负点。 使用负坐标不会导致应用程序失败，但是使用负坐标点定位的对象不会出现在页面上。

基本画布示例

如前所述，HTML5 Canvas让您创建许多类型的对象，包括直线，曲线，路径，形状，文本等。在下面的示例中，您可以看到这些对象的实际绘制方式。 我不会在Canvas API上进行详细介绍。 这些只是一些简单的方法，可以帮助您了解画布的工作原理。

画线

要画一条线，我们使用了四种canvas API方法。 我们从beginPath()方法开始，该方法指示浏览器准备绘制新路径。 接下来，我们使用moveTo(x, y)方法设置直线的起点。 然后， lineTo(x, y)方法设置终点，并通过连接两个点绘制直线。

此时将画出线条，但仍不可见。 为了使其可见，我们使用stroke()方法以默认的黑色显示行。

context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 150);
context.stroke();

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Canvas行示例 。

画矩形

要绘制矩形，我们可以使用fillRect(x, y, width, height)方法设置坐标和尺寸，并使用fillStyle属性设置填充颜色。

context.fillStyle = 'yellow';
context.fillRect(50, 50, 200, 100);

请参见CodePen上的SitePoint （ @SitePoint ）的Pen Canvas Rectangle示例 。

请注意，矩形位于左上角附近。

绘制文字

要在画布上绘制文本，我们可以使用fillText(string, x, y)和font属性来设置文本的字体，大小和样式（类似于CSS中的字体缩写）。

context.font = 'italic 40pt Calibri, sans-serif';
context.fillText('Hello World!', 50, 50);

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Canvas文本示例 。

您应该注意，尽管使用HTML5 Canvas API进行简单绘制很容易，但是创建复杂的形状和动画需要一些数学和物理知识。 关于此主题的最佳书籍之一是带有JavaScript的Foundation HTML5动画 。 这本书是学习从简单到复杂的动画移动的绝佳资源。

在哪里了解更多？

如果您想在这里学习，请参考以下资源：

• 画布教程 –关于MDN的优秀教程，其中包含示例，插图和详细说明。
• HTML5 Canvas元素指南 –六个修订版的初学者教程。
• HTML5 Canvas教程 –由KineticJS画布库的创建者Eric Rowell创建的全套教程。 所有示例都是交互式的。 您可以和他们一起玩，并立即查看结果。

加快画布开发

使用“原始” HTML5 Canvas API可能是一件乏味的工作。 这就是为什么当您很好地学习并切换到可以加速并简化画布开发的良好画布库时，这是一个好主意的原因。

以下是一些受欢迎的选择：

• 动力学JS
• Paper.js
• 画架JS
• Fabric.js
• o帆布

加快HTML5 Canvas开发速度的另一种方法是使用Adobe Illustrator的Ai-> Canvas插件 。 您可以在SitePoint上的本文中找到该插件的概述。

结论

而已。 希望本入门HTML5 Canvas教程为您提供一个良好的起点，让您可以继续学习和探索这种强大的技术。

翻译自: https://www.sitepoint.com/html5-canvas-tutorial-introduction/

html2canvas教程