The best HTML5 Canvas Tutorial In 2024, In this tutorial you can learn What is Canvas?,Browser Support,Create a canvas (Canvas),Examples,Use JavaScript to draw graphics,Examples,Canvas coordinates,Canvas - Path,Examples,Examples,Canvas - Text,Examples,Examples,Canvas - Gradient,Examples,Examples,Canvas - Images,Use an image:,Examples,HTML Canvas Reference Manual,The HTML <canvas> Tag,
<Canvas> tag custom graphics, such as charts and other images, you must use a script to draw graphics.
In the canvas (Canvas) draw a red rectangle, gradient rectangle, colored rectangles, and some colored text.
HTML5 <canvas> element is used to draw graphics using scripting (usually JavaScript) to complete.
<Canvas> tag is a graphical container, you must use a script to draw graphics.
You can use Canva draw paths, boxes, circles, characters, and adding images through a variety of methods.
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support <canvas> element.
Note: Internet Explorer 8 and earlier versions of IE browser does not support <canvas> element.
A canvas page is a rectangle is drawn through the <canvas> element.
Note: By default, the <canvas> element has no border and content.
<Canvas> Simple examples are as follows:
Note: The label usually need to specify an id attribute (the script often cited), size, width and height attributes define the canvas.
Tip: You can use multiple <canvas> element in an HTML page.
Using the style attribute to add a border:
canvas element itself is not drawing power. All work must be drawn in JavaScript done internally:
Analysis examples:
First, find the <canvas> element:
Then, create the context object:
getContext ( "2d") object is a built-in HTML5 object has several methods for drawing paths, boxes, circles, characters, and adding images.
The following two lines of code to draw a red rectangle:
Setting fillStyle property can be a CSS color, gradient, or pattern. fillStyle default setting is # 000000 (black).
fillRect (x, y, width,height) method defines a rectangle filled with the current method.
canvas is a two-dimensional grid.
canvas upper left corner coordinates (0,0)
The above method has fillRect parameters (0,0,150,75).
This means: Draw a 150x75 rectangle on the canvas from the top left corner (0,0).
Examples of coordinates
As shown below, X and Y coordinates of the canvas on the canvas for painting positioning. The movement of the mouse rectangle, display location coordinates.
On Canvas painting line, we will use the following two methods:
Draw a line we must use the "ink" methods, like stroke ().
Define start coordinates (0,0), and end coordinates (200, 100) and then use the stroke () method to draw the line:
JavaScript:
Draw a circle in the canvas, we will use the following method:
In fact, we used the "ink" approach when drawing a circle, such as stroke () or fill ().
Use arc () method to draw a circle:
JavaScript:
Use canvas to draw text, important properties and methods as follows:
Use fillText ():
Use "Arial" font rendering a high 30px text (solid) on the canvas:
JavaScript:
Use strokeText ():
Use "Arial" font rendering a high 30px text (hollow) on canvas:
JavaScript:
Gradient can be filled in rectangles, circles, lines, text, etc., various shapes can define different colors.
Here are two different ways to set Canvas Gradient:
When we use a gradient object, you must use two or more stop color.
addColorStop () method to specify color stops, use coordinates to describe the parameters that can be 0-1.
Using the Gradient setting fillStyle or strokeStyle value gradient, and then draw shapes, such as rectangles, text, or a line.
Use createLinearGradient ():
Create a linear gradient. Use gradient fill rectangle:
JavaScript:
Use createRadialGradient ():
Create a radial / circular gradient. Use gradient fill rectangle:
JavaScript:
The one image onto the canvas, using the following methods:
The image is placed on a canvas:
JavaScript:
Complete property of the label can refer Canvas reference manual.
Tag | 描述 |
---|---|
<canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |