当你设置元素的 width 和 height 属性，你同时设置了元素的尺寸和元素绘图面积的尺寸；然而，当你使用CSS来设置一个canvas元素的大小的时候，你仅仅设置了元素的尺寸，而不是绘图面积的尺寸。当canvas元素的尺寸和绘图面积的尺寸不一样的时候，浏览器会缩放绘图面积来符合元素的尺寸。

正是这个原因，需要使用元素的 width 和 height 属性来设置元素尺寸，而不是用CSS。

理解 Canvas 坐标系统

在二维空间，位置是通过X和Y轴坐标来引用的。X轴为水平延伸，Y轴为垂直延伸。中心的位置是 x = 0 和 y = 0 ，这也可以被表示为 (0, 0) 。定位对象的方法，在数学中被定义为 笛卡儿坐标系统 。

canvas的坐标系统，然而，将原点放在画布的左上角，X轴向右增加，Y轴向下增加。因此和传统的笛卡尔坐标空间不一样，canvas空间没有可见的负值坐标点。使用负值坐标不会导致程序出错，但是使用负值坐标的元素不会在页面上显示。

基础 Canvas 例子

如前所述，HTML5 canvas 可以让你创建许多类型的元素，包括线段，曲线，路径，形状，文本等等。在这个例子中，让你看到这些对象是如何绘制的。我不深入canvas api的细节；这些只是一些简单地帮助你了解canvas是如何运行的。

画线段

画一条线段，我们用4个canvas API的方法。我们从 beginPath() 方法开始，这个方法指示浏览器准备开始画一条新路径。然后我们用 moveTo(x, y) 方法来指定线条的开始点。然后 lineTo(x, y) 方法设置线条的结束点，然后画一条线连接两点。

这个时候，线条会被绘制，但是依然是不可见的。为了使之可见，我们使用 stroke() 方法用默认的黑色来显示这条线段。

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

看来自SitePoint ( @SitePoint )在 CodePen 上的 Canvas线条例子 .

画矩形

画一个矩形，我们用 fillRect(x, y, width, height) 这个方法来设置坐标和尺寸，通过 fillStyle 这个属性来填满颜色。

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

看来自SitePoint ( @SitePoint )在 CodePen 上的 Canvas 矩形例子 。

注意矩形是被定位在左上角的。

画文本

为了在canvas上画文本，我们用 fillText(string, x, y) 和 font 属性来设置投字体，大小和文本样式（和CSS中font的简写类似）。

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

看来自SitePoint ( @SitePoint )在 CodePen 上的 Canvas文本例子 。

你需要意识到虽然用HTML5 canvas简单的绘图很容易，创建复杂的图形和动画要求一些数学和物理知识的支持。其中一本关于此主题的书是  。这本书对于动画有着很好的教学资源，从简单的到复杂的动画都有。

更多资源

这里有些资源如果你想深入学习:

canvas指导 – MDN上一个很好的教程, 全套例子, 图解, 和详细解释。

HTML5 Canvas元素指导 – Six Revisions 的初学者教程.

HTML5 Canvas教程 – Eric Rowell 创建的全套教程, 他是 KineticJS canvas 库的创建者。所有的例子都是可交互的; 你可以与之互动，看看结果是什么。

加快 Canvas 开发

和“原生” HTML5 Canvas API打交道是一件乏味的工作。当你学好了它，然后再使用一个优秀的canvas库，这是一好主意，因为这能够加快并简化你的canvas开发。

这里有一些流行的选择:

KineticJS

Paper.js

Fabric.js

oCanvas

Another way to speed up your HTML5 Canvas development is by using the Ai->Canvas plugin for Adobe Illustrator . You can find an overview of the plugin in this article on SitePoint . 另一个可以加速HTML5 canvas开发的就是使用 Ai->Canvas在AI中的插件 。你可以在 sitepoint上的这篇文章中 ，找到这个插件的概述。

总结

就这样。我希望这篇 HTML5 Canvas 指导 的介绍能给你一个极佳的起点，让你继续学习和探索这样强大技术。

分享给小伙伴们：

本文标签： HTML5，Canvas/">HTML5，Canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻