【译】从头开始的Canvas：Canvas简介-1

当你想到画布时，你可能会想到新的HTML5 canvas 元素。使用该 canvas 元素非常容易;它是一个简单的 HTML 标记，具有定义的宽度和高度。

xml 复制代码

<canvas width="500" height="500"> 
<!-- Insert fallback content here --> 
</canvas>

这还没有多大作用。实际上，它所做的只是在您的页面上插入一个透明的画布。 canvas 元素内部的内容是回退内容，仅当浏览器不支持画布时才会显示。

浏览器支持

重要的是要指出，浏览器对画布的支持非常惊人。每个现代浏览器都支持它，包括最新的Internet Explorer。

Internet Explorer (9.0+)
IE浏览器（9.0+）
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)

有趣的是，您可以通过 ExplorerCanvas 插件在 Internet Explorer 版本 8 及更低版本中使用一些画布功能

画布尺寸

从 canvas 中学到的一个关键教训是，在定义 canvas 元素的维度时，必须显示的设置 width 和 height 属性。使用 CSS 设置宽度和高度将有效地使画布向上（或向下）缩放到该大小。这背后有一个合乎逻辑的原因;这与 canvas 元素是称为 2D 渲染上下文的容器有关。但是，重要的是要知道使用 CSS 设置画布尺寸会产生奇怪的效果

发现 2D 渲染上下文

当你使用画布时，你不是在 canvas 元素本身上绘图。相反，您实际上是在绘制 2D 渲染上下文，您可以通过 JavaScript API 通过 canvas 元素访问该上下文。这在宏伟的计划中并不重要，但知道是有用的。

坐标系

如果您以前使用过任何2D图形编程语言（ActionScript，Processing等），那么您将了解有关基于屏幕的坐标系的所有信息。画布中的 2D 渲染上下文也不例外;它使用标准的笛卡尔坐标系，原点（0， 0）位于左上角。向右移动将增加 x 轴的值，而向下移动将增加 y 轴的值。这很简单。

坐标系中的一个单位等于屏幕上的一个像素（在大多数情况下）。

访问 2D 渲染上下文

要实际使用 2D 渲染上下文，您需要使用 JavaScript API。要使用的 API 部分是 getContext 方法，如下所示：

xml 复制代码

 <!DOCTYPE html> 
<html> 
	<head> 
		<title>Canvas from scratch</title> 
		<meta charset="utf-8"> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
		<script> 
			$(document).ready(function() {
                        var canvas = document.getElementById("myCanvas"); 
                        var ctx = canvas.getContext("2d"); 
                      
			}); 
		</script> 
	</head> 
	<body> 
		<canvas id="myCanvas" width="500" height="500"> 
			<!-- Insert fallback content here --> 
		</canvas> 
	</body> 
</html>

注意：您在这里使用的是jQuery，但仅用于检查DOM何时准备就绪。随意使用您喜欢的 JavaScript 库，或将代码放在文档的底部。

作为调用 getContext 的结果， ctx 该变量现在将包含对 2D 渲染上下文的引用。这意味着您现在已准备好实际开始在画布上绘图的所有内容。

绘制矩形

现在，您可以访问 2D 呈现上下文，可以开始调用 API 的绘制方法。其中一个最基本的是 fillRect ，它绘制一个用特定颜色（默认为黑色）填充的矩形。

在前面的 ctx 变量下添加以下代码：

ini 复制代码

ctx.fillRect(50, 50, 100, 100);

这将绘制一个黑色正方形，该方块略微远离画布的左边缘和上边缘，如下所示：

注意：您会注意到您正在使用 JavaScript API 的矩形方法来绘制正方形。这是因为画布中没有直接绘制正方形的方法，很简单，因为正方形是矩形（它们有四个边，它们之间有直角）

在调用 fillRect 时有四个参数：

第一个是原点的 x 位置（左上角）。除了矩形（唯一可以使用单个 API 方法绘制的形状）之外，您还有路径。路径允许您绘制线条，无论是直线还是曲线，都可以组合起来创建相当复杂的形状。

绘制简单的路径需要使用一些新的 API 方法：

第二个是原点的 y 位置。
第三是宽度。
第四个是高度。

arduino 复制代码

ctx.fillRect(x, y, width, height);

不仅限于填充矩形。不。您还可以绘制描边矩形;也就是说，周围有轮廓的矩形。为此，您可以使用JavaScript API strokeRect 的方法，如下所示：

ini 复制代码

ctx.strokeRect(50, 50, 100, 100);

它使用与完全相同的参数fillRect，结果将是一个可爱的正方形轮廓

绘制路径

除了矩形（唯一可以使用单个 API 方法绘制的形状）之外，您还有路径。路径允许您绘制线条，无论是直线还是曲线，都可以组合起来创建相当复杂的形状。

绘制简单的路径需要使用一些新的 API 方法：

beginPath开始一条新的道路。
moveTo移动绘制路径的起点。
lineTo从 moveTo 中定义的点或上次调用 lineTo 的点绘制一条到该点的直线路径。
closePath通过将最后一个点连接到起点来闭合路径。
fill用颜色填充路径。
stroke勾勒出路径。

尝试以下代码：

ini 复制代码

ctx.beginPath(); 
ctx.moveTo(50, 50); 
ctx.lineTo(50, 250); 
ctx.lineTo(250, 250); 
ctx.closePath(); 
ctx.fill();

这将绘制一条三角形路径，并填充它：

您可以使用相同的概念来绘制所需的任何其他形状。路径几乎是绘制比矩形更复杂的东西的唯一方法。

改变颜色

到目前为止，您绘制的所有内容都已用黑色填充或描边。幸运的是，JavaScript API 中有几个属性可以让你更改正在绘制的形状的颜色。这些属性是 fillStyle 和 strokeStyle 。

ini 复制代码

ctx.fillStyle = "rgb(255, 0, 0)"; 
ctx.fillRect(50, 50, 100, 100);

ini 复制代码

ctx.strokeStyle = "rgb(255, 0, 0)"; 
ctx.strokeRect(50, 50, 100, 100);

strokeStyle 和 fillStyle 美妙之处在于它们都接受正常的CSS颜色值。这意味着您可以使用RGB，RGBA，HSA，颜色词（例如。"红色"），和十六进制值。

值得指出的是，更改画布中的颜色不会影响已绘制的任何内容。例如，如果绘制一个黑色矩形，然后将填充样式更改为红色，然后绘制另一个矩形;第一个矩形仍将为黑色。

更改线宽

除了更改颜色外，您还可以更改描边轮廓的宽度。为此， lineWidth 您可以使用JavaScript API的属性。

使用上一示例中的代码，可以更改轮廓的宽度：

ini 复制代码

ctx.lineWidth = 20; 
ctx.strokeStyle = "rgb(255, 0, 0)"; 
ctx.strokeRect(50, 50, 100, 100);

同样的概念也适用于路径。例如，您可以将之前的三角形更改为更粗的轮廓：

ini 复制代码

ctx.lineWidth = 20; 
ctx.beginPath(); 
ctx.moveTo(50, 50); 
ctx.lineTo(50, 250); 
ctx.lineTo(250, 250); 
ctx.closePath(); 
ctx.stroke();

你会得到一个厚实的三角形

擦除画布

只需要一个来自JavaScript API的方法。该方法是 clearRect 使矩形中的每个像素都透明。

在本文中，画布宽 500 像素，高 500 像素，因此您可以通过如下调用 clearRect 轻松擦除整个画布：

ini 复制代码

ctx.fillRect(50, 50, 100, 100); 
ctx.clearRect(0, 0, 500, 500);

clearRect 参数与 fillRect x、y，宽度，高度是等同的。

如果您不确定画布的宽度和高度，使用canvas 元素本身的 width and height 属性，也可以像这样擦除它：

arduino 复制代码

ctx.clearRect(0, 0, canvas.width, canvas.height);

擦除画布的一小部分

如果您不想，则不必擦除整个画布。您可以轻松地只擦除一小部分。例如，假设您在红色方块旁边绘制了一个黑色方块：

ini 复制代码

ctx.fillRect(50, 50, 100, 100); 
ctx.fillStyle = "rgb(255, 0, 0)"; 
ctx.fillRect(200, 50, 100, 100);

您可以擦除黑色方块，并通过在 clearRect 下面添加调用来保持红色方块不变：

ini 复制代码

ctx.clearRect(50, 50, 100, 100);

请注意，此对 clearRect 的调用如何定义与黑色方块相同的位置和大小。这基本上意味着它只会将正方形区域中的像素更改为透明黑色（擦除它们）：

总结

Canvas 易于使用，快速学习，当您将其推向极限时，它非常强大

翻译自： webdesign.tutsplus.com/canvas-from...