体育平台注册就送

書名： Canvas Cookbook
作者名： Bhushan Purushottam Joshi
本章字數： 235字
更新時間： 2021-07-16 11:03:16

Drawing rectangles

There are three different functions in the canvas API to draw rectangles. They are:

rect(xPos,yPos,width,height)
fillRect(xPos,yPos,width,height)
strokeRect(xPos,yPos,width,height)

Let's see these all together in a single recipe. So here is the output of our first recipe:

How to do it…

The output that shows three different rectangles, uses a call to three different functions, which are explained further. The recipe is as follows.

An HTML file that includes the canvas element:

<html>
<head>
<title>Rectangles</title>
<script src="Rectangles.js"></script>
</head>
<body onload="init()" bgcolor="#FFFFCC">
<canvas id="canvas" width="250" height="200" style="border:2px solid blue;" >
  your browser does not support canvas
</canvas>
<H1>Rectangles</H1>
</body>
</html>

The JavaScript file as mentioned in the <script> tag in the previously given code:

function init()
{
  var canvas = document.getElementById("canvas");
  if(canvas.getContext)
  {
    // Color of drawing, fillStyle is this color
    var ctx = canvas.getContext("2d");    

    // Draw a square(rectangle with same sides)
    // from top left corner x,y, width, height
    ctx.strokeStyle="purple"  
    ctx.rect(10,10,70,50);
    ctx.fillStyle="lightgreen";
    ctx.fill();
    ctx.stroke();  

    //draw another rectangle
    ctx.fillStyle="crimson";
    ctx.fillRect (50,25, 100,100);

    //draw yet another
    ctx.strokeStyle="blue";  
    ctx.lineWidth=10;  
    ctx.strokeRect(100,60,80,130);    
  }
}

How it works...

This is what you can observe in the output of the recipe:

The top-most blue bordered rectangle is drawn using the strokeRect() function
The second red colored rectangle is drawn using the fillRect() function
The first green colored rectangle is drawn using the rect() and fill() functions

The property fillStyle decides the color for filling the rectangle. The strokeStyle property decides the color of the border.

The three rectangles drawing functions accept the following parameters:

Diagrammatically it can be shown as follows:

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

Canvas Cookbook

Drawing rectangles

How to do it…

How it works...