HTML5 Canvas
<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.
What is Canvas?
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.
Browser Support
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.
Create a canvas (Canvas)
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:
Examples
style="border:1px solid #000000;">
</canvas>
try it"
Use JavaScript to draw graphics
canvas element itself is not drawing power. All work must be drawn in JavaScript done internally:
Examples
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
try it"
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:
ctx.fillRect(0,0,150,75);
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 coordinates
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.
Canvas - Path
On Canvas painting line, we will use the following two methods:
- moveTo(x, y) coordinates define a line beginning
- lineTo(x, y) coordinates to define the end of the line
Draw a line we must use the "ink" methods, like stroke ().
Examples
Define start coordinates (0,0), and end coordinates (200, 100) and then use the stroke () method to draw the line:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
try it"
Draw a circle in the canvas, we will use the following method:
- arc (x, y, r, start, stop)
In fact, we used the "ink" approach when drawing a circle, such as stroke () or fill ().
Examples
Use arc () method to draw a circle:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
try it"
Canvas - Text
Use canvas to draw text, important properties and methods as follows:
- font - define the font
- fillText (text, x, y)- Draws a solid text on canvas
- strokeText (text, x, y)- drawing on canvas hollow text
Use fillText ():
Examples
Use "Arial" font rendering a high 30px text (solid) on the canvas:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
try it"
Use strokeText ():
Examples
Use "Arial" font rendering a high 30px text (hollow) on canvas:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
try it"
Canvas - Gradient
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:
- createLinearGradient (x, y, x1,y1) - Create a line gradient
- createRadialGradient (x, y, r,x1, y1, r1) - Create a radial / circular 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 ():
Examples
Create a linear gradient. Use gradient fill rectangle:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
try it"
Use createRadialGradient ():
Examples
Create a radial / circular gradient. Use gradient fill rectangle:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
try it"
Canvas - Images
The one image onto the canvas, using the following methods:
- drawImage(image, x, y)
Use an image:
Examples
The image is placed on a canvas:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
try it"
HTML Canvas Reference Manual
Complete property of the label can refer Canvas reference manual.
The HTML <canvas> Tag
Tag | 描述 |
---|---|
<canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |