画布元素：开始绘制

Last time around, we took a general look at the canvas element and how it is supported (or not) in various browsers. This time, we’ll start to go into the element in a bit more detail and start to look at some the things we can do with it.

上一次 ，我们对canvas元素以及各种浏览器如何支持(或不支持)canvas元素进行了一般性的研究。 这次，我们将开始更详细地介绍该元素，并开始研究我们可以使用它做的一些事情。

快速浏览属性 (A Quick Look at Attributes)

We’ve already seen how to set up the canvas element in HTML:

我们已经了解了如何在HTML中设置canvas元素：

You’ve probably noticed that we’ve included an id attribute on our canvas element to make it easier for us to access the element in our Javascript. You can also apply other standard attributes like class, title or tabindex. Two other attributes, height and width, will also be used fairly regularly.

您可能已经注意到，我们在canvas元素上包含了id属性，以使我们可以更轻松地访问Javascript中的元素。 您还可以应用其他标准属性，例如class，title或tabindex。 高度和宽度这两个其他属性也将被定期使用。

You can define the height and width as attributes in the canvas element, or you can use CSS to define the dimensions of your element. If you use CSS, however, your canvas will scale to meet the dimensions you define instead of simply resizing the area. Neither height nor width are necessary, however. If you choose to not define the size of the canvas element, then it defaults to a size of 300 pixels wide by 150 pixels high.

您可以将height和width定义为canvas元素中的属性，也可以使用CSS定义元素的尺寸。 但是，如果使用CSS，则画布将缩放以符合您定义的尺寸，而不是简单地调整区域大小。 但是，高度和宽度都不是必需的。 如果您选择不定义canvas元素的大小，则默认为300像素宽x 150像素高。

卷起你的袖子… (Roll Up Your Sleeves…)

All of this so far has been pretty easy…but also boring. The canvas element’s real power, of course, is the ability to use Javascript to manipulate it. To do so, we have to get a rendering context using the getContext() function. The rendering context is what allows us to actually manipulate the content in the canvas element. The function is straight forward and easy to use:

到目前为止，所有这些都非常容易……但也很无聊。 画布元素的真正力量当然是使用Javascript进行操作的能力。 为此，我们必须使用getContext()函数获取渲染上下文。 渲染上下文使我们能够实际操作canvas元素中的内容。 该功能简单易用：

1. var canvas = document.getElementById(‘canvas’);

   var canvas = document.getElementById('canvas');

2. var context = canvas.getContext(‘2d’);

   var context = canvas.getContext('2d');

Currently, “2d” is the only defined context that we can obtain. In the future, it is not unreasonable to expect to see that expand and include support for a three dimensional drawing context. Of course in a real-world setting you’ll want to check to make sure the browser supports the getContext method in the first place. The canvas element is still relatively new and there will be a fair amount of browsers that will not support it.

当前，“ 2d”是我们可以获得的唯一定义的上下文。 将来，期望看到扩展并包含对三维图形上下文的支持并不是没有道理的。 当然，在实际设置中，您将需要检查以确保浏览器首先支持getContext方法。 canvas元素仍然是相对较新的，并且将有相当数量的浏览器不支持它。

唯一的 (The One and Only)

Now that we have a rendering context, let’s make use of it by starting to draw something to the canvas. The canvas element only natively supports one shape and that is the rectangle. Don’t panic….you’ll see later that there are plenty of methods available for us to create everything from a basic circle to very complex abstract shapes.

现在我们有了一个渲染上下文，让我们开始在画布上绘制一些东西来使用它。 canvas元素仅本地支持一种形状，即矩形。 不要惊慌……您稍后会看到，有很多方法可以帮助我们创建从基本圆到非常复杂的抽象形状的所有内容。

For now though, we’ll keep it simple and just make a rectangle. We have three functions that are available to use for this: fillRect(), strokeRect(), and clearRect(). The functions do pretty much exactly what you would think based on their names. fillRect() draws a filled rectangle; strokeRect() draws a rectangle with border, or stroke, around it; and clearRect() clears the area and makes a fully transparent rectangle. To make it even more simple, each of the functions takes the exact same parameters. Let’s take for example the following line of code:

现在，我们将使其保持简单，仅制作一个矩形。 我们有三个函数可用于此功能：fillRect()，strokeRect()和clearRect()。 这些函数几乎完全可以根据它们的名称来考虑您的想法。 fillRect()绘制一个填充的矩形； strokeRect()绘制一个带有边框或笔触的矩形； 和clearRect()清除区域并制作一个完全透明的矩形。 为了使其更加简单，每个函数都采用完全相同的参数。 让我们以下面的代码行为例：

• context.fillRect(0,0,50,75);
  context.fillRect(0,0,50,75);

As you can see, the function takes four parameters. The first two define the starting point of the shape, the x and y coordinates. Thankfully the coordinates follow common sense. The origin or (0,0) is the top left of the canvas element. So (0,10) would be at the top and 10 pixels from the left.

如您所见，该函数具有四个参数。 前两个定义形状的起点，即x和y坐标。 幸运的是，坐标遵循常识。 原点或(0,0)在canvas元素的左上方。 因此(0,10)将位于顶部，而距左侧10个像素。

The next two parameters are the width and height of the canvas element. In this case, I made a rectangle that is 50 pixels wide and 75 pixels high. So the result of the above line of code is a 50 pixel by 75 pixel, filled rectangle in the top left corner of the canvas element. To get a good idea of the results of each of the rectangle functions, we’ll use the following code (we’ve also set the height and width attributes on our canvas element to 125 pixels each) :

接下来的两个参数是canvas元素的宽度和高度。 在这种情况下，我制作了一个宽50像素，高75像素的矩形。 因此，以上代码行的结果是50像素乘以75像素，并在canvas元素的左上角填充了矩形。 为了更好地了解每个矩形函数的结果，我们将使用以下代码(我们还将canvas元素的height和width属性分别设置为125像素)：

1. context.fillRect(0,0,50,50);

   context.fillRect(0,0,50,50);

2. context.clearRect(25,25,50,50);

   context.clearRect(25,25,50,50);

3. context.fillRect(50,50,50,50);

   context.fillRect(50,50,50,50);

4. context.strokeRect(75,75,50,50);

   context.strokeRect(75,75,50,50);

The result, as you can see here, is four overlapping rectangles. Remember, you’ll need Firefox (1.5+), Safari, or Opera (9+) to view it. As you can see, the clear rectangle clears out the area it covers. The stroke rectangle, on the other hand, doesn’t clear out the area, so you can see the filled rectangle through it.

如您在此处看到的，结果是四个重叠的矩形。 请记住，您将需要Firefox(1.5 +)，Safari或Opera(9+)来查看它。 如您所见，透明矩形清除了它覆盖的区域。 另一方面，笔触矩形不会清除该区域，因此您可以通过它看到填充的矩形。

下次 (Next Time)

Next time around, we’ll start to look at some of the other functions available, and how we can use those functions to start making a variety of shapes…not just simple rectangles. To wet your appetite a bit in the meantime, have a look at another great example of how the canvas element can be used.

下次，我们将开始研究其他可用功能，以及如何使用这些功能开始制作各种形状，而不仅仅是简单的矩形。 在此期间，要稍微放松一下胃口，请看一下如何使用canvas元素的另一个很好的例子 。

翻译自: https://timkadlec.com/2008/09/the-canvas-element-starting-to-draw/