HTML5 Canvas入门：第1部分

大家好，这是我在 CodeProject 的第一篇文章，我很高兴能向大家介绍这篇关于 HTML5 <canvas> 元素的文章。如您所知，HTML5 已经存在相当长一段时间了，由于所有主流浏览器都以非常微小的差异支持其语义，许多开发人员现在选择它作为他们首选的 Web 开发选择。特别是在发布了支持 HTML5 和硬件加速文本、视频和图形的 IE9 之后，性能得到了提升，这使得网站的运行就像安装在计算机上的程序一样，或者用 Dean Hachamovitch 的话说，是一种“原生体验”。随着在 MIX11 上宣布 IE10 Platform Preview 1 可供下载，这是在原生 HTML5 支持方面取得下一波进展的第一步。所以让我们开始探索 HTML5 最强大的元素—— <canvas> 元素。

引言

HTML5 规范将 <canvas> 元素定义为“一个分辨率相关的位图画布，可用于即时渲染图表、游戏图形或其他视觉图像”。Canvas 是您页面中的一个矩形，您可以使用 JavaScript 在其中绘制任何您想要的内容。默认情况下，<canvas> 元素没有内容，也没有自己的边框。您可以使用以下最简单的 HTML 定义一个简单的 <canvas> 元素。

<canvas id="mycanvas" width="300" height="225"></canvas>

这里的 height 和 width 指定了画布的大小，id 用于在您的 JavaScript 代码中访问它。如果您在标签之间放置任何内容，如果浏览器不支持 <canvas> 元素，它将被视为备用内容。

除了这些属性，它还支持两个特定于此元素的功能：getContext 和 toDataURL

getContext()

此函数是您可以在 <canvas> 上绘制所有内容的入口。每个画布都有一个绘图上下文，所有有趣的事情都发生在这里。一旦您在 DOM 中找到一个 <canvas> 元素（通过使用 document.getElementById() 或您喜欢的任何其他方法），您就可以调用它的 getContext() 方法。目前只支持“2d”上下文，根据 WHATWG Wiki CanvasContexts 页面，还有一个“webgl”上下文，但它尚未被许多浏览器支持，尽管它可能在未来的规范修订中得到支持。因此，要获取上下文，您将传递字符串“2d”作为参数，这将返回一个新的 CanvasRenderingContext2D 对象，其方法可用于在 <canvas> 上绘图。

toDataURL()

此方法在不带参数调用时，返回一个 data: URL (rfc2397)，其中包含 <canvas> 上所有内容的表示形式，作为 PNG 图像文件。您还可以向此函数传递任何有效 MIME 类型的 string 表示形式，以该格式获取数据，例如“image/png”、“image/jpeg”。

画布绘图模型

想象一下您正在用墨水画一幅画。您不想直接用墨水开始绘画，因为您可能会犯错。相反，您用铅笔勾勒线条和曲线，一旦您满意了，再用墨水描绘您的草图。

每个画布都有一个路径。定义路径就像用铅笔画画。您可以画任何您喜欢的东西，但它不会成为成品的一部分，直到您拿起鹅毛笔并用墨水描绘您的路径。

在 canvas 中，几乎所有您调用的绘图方法都会添加一个路径（除了 fillRect() 和 fillText() 方法会立即绘制填充形状），并且在您调用 stroke()、fill() 或 clip() 方法之前不会绘制。fill() 方法使用当前的 fillStyle() 填充路径，stroke() 方法使用当前的 strokeStyle() 绘制路径，clip() 方法为路径创建剪裁区域。

示例

现在让我们探索如何使用 <canvas> 元素，并开始使用其方法在画布上绘图。对于这个例子，我们将使用 Context 对象的一些方法绘制一些简单的形状（有关所有方法，请参阅方法和属性）。

定义一个 <canvas>

您可以使用以下简单的标记定义一个 <canvas>

<canvas id="mycanvas" width="300" height="100" style="border:1px solid black"></canvas>

上面是一个简单的 <canvas>，我给它加了边框，这样您就可以看到它了。

获取上下文

接下来，我们将通过以下 JavaScript 代码行获取绘图上下文。

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

让我们在 <canvas> 上绘图！！！

我们将在 <canvas> 上绘制一个正方形、一个圆形和一些文本，为此我们将使用以下方法（有关所有方法，请参阅方法和属性）

• fillRect( x, y, fWidth, fHeight):

  使用当前的填充样式在 CanvasRenderingContext2D 对象上绘制一个矩形。

• beginPath():

  重置当前路径。

• arc( x, y, radius, startAngle, endAngle, bAnticlockwise):

  向表示弧形的路径添加点（角度以弧度表示）。

• fill():

  使用当前的填充样式填充子路径。

• fillText( text, x, y [, maxWidth]):

  使用当前的填充样式和字体将填充的文本渲染到画布上。（maxWidth 是可选的。它指定了最大的文本宽度。如果该值小于宽度属性，文本将缩放以适应。）

• fillStyle:

  它是一个属性，用于设置填充形状的样式。它可以是 CanvasGradient、CSS 颜色或 CanvasPattern。

通过使用上述方法，我们可以编写以下 JavaScript 代码在 <canvas> 上绘图。

var acDegToRad = function(deg){ return deg * -(Math.PI/180)}
context.fillStyle = "rgb(0,160,250)"; 
context.fillRect(10,10,50,50);  
context.beginPath(); 
context.arc(200,35,25, acDegToRad(0), acDegToRad(360)); /
context.fill();
context.fillText("Hi, I’m Samaj Shekhar", 100,80);

让我逐行解释一下，在第二行，我们使用 rgb() 字符串设置蓝色 fillStyle 属性。然后，我们在 (10,10) (x,y) 坐标处绘制一个宽度和高度均为 50px 的填充矩形，从而形成一个正方形。在第四行，我们开始一个路径来创建一个圆形，然后下一行我们用 arc() 函数定义圆形，传入圆心坐标 (200,35)(x,y)，半径 25px，起始角度 0deg 和结束角度 360deg，从而完成圆形的完整路径。由于此函数接受“弧度”角度，并且默认以顺时针方向绘制角度，因此我在第一行定义了一个小函数 acDegToRad()，它将传入的度数值转换为弧度，然后取反结果以使度数逆时针（正如我们学校里学到的那样 :)。然后，在第六行，我们调用 fill() 方法来实际绘制并填充路径，在本例中是一个圆形。最后一行简单地在 (100,80)(x,y) 坐标处绘制字符串。默认情况下，2d 上下文的“font”是 10px sans-serif。您可以通过将其作为字符串传递给 context.font 属性来设置任何 CSS 字体

这是绘制的形状

下面是另一个画布，上面有一个相当复杂的图形，是我的最爱游戏之一 PORTAL2 的标志 :)。在我的下一篇文章中，我们将更深入地探讨 <canvas> 的其他功能，我将详细介绍如何绘制这个漂亮的 PORTAL2 标志。

方法和属性

截至目前，CanvasRenderingContext2D 对象仅包含 49 种方法和属性。MSDN 提供了一个不错的列表。以下是它们的简短说明

属性	描述
canvas	获取对当前上下文派生自的 canvas 对象的反向引用。
fillStyle	获取或设置用于填充形状的当前样式。
font	获取或设置上下文的当前字体。
globalAlpha	获取或设置应用于全局合成渲染操作的当前 alpha 或透明度值。
globalCompositeOperation	获取或设置一个值，该值指示如何将源图像绘制到目标图像上。
lineCap	获取或设置当前线帽样式。
lineJoin	获取或设置当两条线相遇时创建的拐角类型。
lineWidth	获取或设置当前线宽，单位为像素。
miterLimit	获取或设置 lineWidth 值的一半与斜接长度之间的最大允许比率。
shadowBlur	获取或设置应用于阴影的当前模糊级别。
shadowColor	获取或设置用于阴影的颜色。
shadowOffsetX	获取或设置阴影与形状的水平距离。
shadowOffsetY	获取或设置阴影与形状的垂直距离。
strokeStyle	获取或设置用于形状描边的当前样式。
textAlign	获取或设置当前上下文中文本的当前锚点或对齐设置。
textBaseline	获取或设置字体基线对齐的当前设置。

方法	描述
arc	向表示弧形的路径添加点。
arcTo	在由路径中的当前点和另外两个点定义的两个切线之间绘制一个固定半径的弧形。
beginPath	重置当前路径。
bezierCurveTo	使用表示三次贝塞尔曲线的指定控制点向当前子路径添加一个点。
clearRect	清除 CanvasRenderingContext2D 对象中给定矩形内的像素。
clip	指定新的剪裁区域。
closePath	关闭当前子路径并启动一个新子路径，其起点等于封闭子路径的终点。
createImageData	返回一个具有 CSS 像素尺寸的 CanvasImageData 对象。
createLinearGradient	创建一个表示线性渐变的对象，用于画布上下文。
createPattern	返回一个 CanvasPattern 对象，它以指定方向重复指定的元素。
createRadialGradient	返回一个表示径向或圆形渐变的对象，用于画布上下文。
drawImage	将指定的图像绘制到画布上。
fill	使用当前的填充样式填充子路径。
fillRect	使用当前的 fill style 在 CanvasRenderingContext2D 对象上绘制一个矩形。
fillText	使用当前的填充样式和字体将填充的文本渲染到画布上。
getImageData	返回一个 ICanvasImageData 对象，该对象表示画布上指定矩形的像素数据。
isPointInPath	确定指定点是否在当前路径中。
lineTo	向子路径添加一个新点，并使用直线将该点连接到子路径的最后一个点。
measureText	返回一个 CanvasTextMetrics 对象，其中包含指定文本的宽度。
moveTo	使用指定点创建一个新的子路径。
putImageData	将指定 CanvasImageData 对象中的数据绘制到画布上。
quadraticCurveTo	使用表示二次贝塞尔曲线的指定控制点向当前子路径添加一个点。
rect	创建一个新的封闭矩形子路径。
restore	恢复先前保存的 CanvasRenderingContext2D 路径状态和属性。
rotate	旋转当前上下文坐标（即转换矩阵）。
save	保存当前上下文的状态。
scale	通过指定的水平 (x) 和垂直 (y) 因子缩放当前上下文。
setTransform	将当前上下文的当前转换矩阵重置为默认值，然后将其乘以指定的矩阵。
stroke	使用当前描边样式渲染当前子路径的描边。
strokeRect	使用当前的描边、线宽和连接样式在画布上创建指定矩形的轮廓。
strokeText	使用当前字体和 strokeStyle 属性在指定位置渲染指定文本。
transform	修改当前上下文的转换矩阵。
翻译	指定在画布中移动原点的值。

原文在此