HTML5Canvas explanation and example tutorials

HTML5 Canvas

The canvas> tag defines graphics, such as charts and other images, and you must use scripts to draw graphics.

Draw a red rectangle, gradient rectangle, colored rectangle, and some colored text on the canvas.

##What is Canvas?

HTML5 element is used for drawing graphics through scripts (usually

JavaScript) to complete.

tags are just graphics containers, you have to use a script to draw the graphics.

You can use Canva to draw paths, boxes, circles, characters and add images in a variety of ways.

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the element.

Note: Internet Explorer 8 and earlier IE This version of the browser does not support the element.

Create a canvas (Canvas)

A canvas is a rectangular box in a web page, drawn through the element.

Note: By default, the element has no borders and content.

A simple example is as follows:

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

Note: Tags usually need to specify an id attribute (often referenced in scripts), and the width and height attributes define the size of the canvas.

Tip: You can use multiple elements in an HTML page.

Use the style attribute to add borders:

Example

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

Use JavaScript to Drawing images

The canvas element itself does not have

drawing capabilities. All drawing work must be done inside JavaScript:

Example

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Example analysis:

First, find the element:

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

Then , create context

Object:

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

getContext("2d") object is a built-in HTML5 object with multiple methods for drawing paths, rectangles, circles, characters and adding images.

The following two lines of code draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Setting the fillStyle property can be a CSS color, gradient, or pattern. The default setting for fillStyle is #000000 (black).

fillRect(x,y,width,height) method defines the current filling method of the rectangle.

Canvas coordinates

canvas is a two-dimensional grid.

The coordinates of the upper left corner of the canvas are (0,0)

The fillRect method above has parameters (0,0,150,75).

Means: Draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

【Related Recommendations】

1.

Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2.

Free h5 online video tutorial##3.

php.cn original html5 video tutorial

The above is the detailed content of HTML5Canvas explanation and example tutorials. For more information, please follow other related articles on the PHP Chinese website!