画布功能

The <canvas> element is used to draw graphics, on the fly, on a web page.

 

一、概述

 

What is Canvas?

 

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

 

The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics.

 

A canvas is a drawable region defined in HTML code with height and width attributes.

 

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

 

二、步骤

 

（1）

Create a Canvas

 

A canvas is specified with the <canvas> element.

 

Specify the id, width, and height of the <canvas> element:

 

<canvas id="myCanvas" width="200" height="100"></canvas>

 

（2）

Draw With JavaScript

 

The <canvas> element has no drawing abilities of its own.

 

All drawing must be done inside a JavaScript:

 

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

 

JavaScript uses the id to find the <canvas> element:

 

var c=document.getElementById("myCanvas");

Then, create a context object:

 

var ctx=c.getContext("2d");

The getContext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

 

The next two lines draws a red rectangle:

 

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

The fillStyle attribute makes it red, and the fillRect attribute specifies the shape, position, and size.

 

Understanding Coordinates

 

The fillRect property above had the parameters (0,0,150,75).

 

This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).

 

The canvas' X and Y coordinates are used to position drawings on the canvas.