官术网_书友最值得收藏!

首頁 >

HTML5 Canvas Cookbook

Drawing a rectangle

In this recipe, we'll learn how to draw the only built-in shape provided by the HTML5 canvas API, a rectangle. As unexciting as a rectangle might seem, many applications use them in one way or another, so you might as well get acquainted.

Drawing a rectangle

How to do it...

Follow these steps to draw a simple rectangle centered on the canvas:

  1. Define a 2D canvas context: 
    window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
  2. Draw a rectangle using the rect() method, set the color fill with the fillStyle property, and then fill the shape with the fill() method: 
        context.rect(canvas.width / 2 - 100, canvas.height / 2 - 50, 200, 100);
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();
};
  3. Embed the canvas tag inside the body of the HTML document: 
    <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

How it works...

As you can see from the preceding code, we can draw a simple rectangle by using the rect() method:

context.rect(x,y,width,height);

The rect() method draws a rectangle at the position x,y, and defines its size with width and height. Another key thing to pay attention to in this recipe is the usage of fillStyle and fill(). Similar to strokeStyle and stroke(), we can assign a fill color using the fillStyle method and fill the shape using fill().

Tip

Notice that we used fill() before stroke(). If we were to stroke a shape before filling it, the fill style would actually overlay half of the stroke style, effectively halving the line width style set with lineWidth. As a result, it's good practice to use fill() before using stroke().

There's more...

In addition to the rect() method, there are two additional methods that we can use to draw a rectangle and also apply styling with one line of code, the fillRect() method and the strokeRect() method.

The fillRect() method

If we intend to fill a rectangle after drawing it with rect(), we might consider both drawing the rectangle and filling it with a single method using fillRect():

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

The fillRect() method is equivalent to using the rect() method followed by fill(). When using this method, you'll need to define the fill style prior to calling it.

The strokeRect() method

In addition to the fillRect() method, we can draw a rectangle and stroke it with a single method using the strokeRect() method:

context.strokeRect(x,y,width,height);

The strokeRect() method is equivalent to using the rect() method followed by stroke(). Similar to fillRect(), you'll need to define the stroke style prior to calling this method.

Tip

Unfortunately, the HTML5 canvas API does not support a method that both fills and strokes a rectangle. Personally, I like to use the rect() method and apply stroke styles and fills as needed using stroke() and fill() because it's more consistent with custom shape drawing. However, if you're wanting to apply both a stroke and fill to a rectangle while using one of these short-hand methods, it's good practice to use fillRect() followed by stroke(). If you were to use strokeRect() followed by fill(), you would overlay the stroke style by the fill, halving the stroke line width.

See also...

主站蜘蛛池模板： 武穴市| 岑巩县| 湖南省| 西乌珠穆沁旗| 高碑店市| 通河县| 三明市| 梁山县| 乐山市| 云阳县| 甘孜县| 平南县| 休宁县| 凌海市| 安龙县| 隆昌县| 高淳县| 错那县| 蒙城县| 海淀区| 祁连县| 郑州市| 涞水县| 丰都县| 朝阳区| 长沙县| 化州市| 侯马市| 芦山县| 喀喇沁旗| 泾源县| 柳河县| 上高县| 津市市| 扎赉特旗| 邓州市| 井研县| 桑日县| 乐东| 石景山区| 宿迁市|