Getting Started with HTML5 Canvas (1) - Basic Concepts

What is Canvas

is a new HTML element, which is defined in HTML5. This element can usually be used to draw graphics, synthesize images, etc. in HTML pages through JavaScript, and can also be used to do some animations. Of course, the HTML5 specification is still in the draft stage, and the official release may have to wait until 2010, but many browsers already support part of the HTML5 specification. Browsers that currently support the canvas element include Firefox 3+, Safari 4, Chrome 2.0+, etc. Therefore, when running the examples on this page, please make sure you are using one of the above browsers.

Although there are already many tutorials about Canvas in Mozilla, I decided to record my learning process. If you feel that what I wrote is not clear enough, you can find a link to the Canvas tutorial on the Mozilla website in the references.

Also, some interesting Canvas examples can be found here.

Start using Canvas

Using Canvas is very simple. Just like using other HTML elements, you only need to add a tag to the page:

<canvas id="screen" width="400" height="400"></canvas>

Of course, this just simply creates a Canvas object. , and no operations are performed on it. At this time, the canvas element looks no different from the div element, and nothing can be seen on the page:)
In addition, the size of the canvas element can be specified through the width and height attributes. This is somewhat similar to the img element.
The core of Canvas: Context
As mentioned earlier, the Canvas object can be operated through JavaScript to draw graphics, synthesize images, etc. These operations are not performed through the Canvas object itself, but to obtain the Canvas through a method of the Canvas object, getContext. operating context. In other words, when we use the Canvas object later, we will deal with the Context of the Canvas object, and the Canvas object itself can be used to obtain information such as the size of the Canvas object.
Getting the Context of the Canvas object is very simple, just call the getContext method of the canvas element directly. When calling, you need to pass a Context type parameter. The only type value currently available and available is 2d:

<canvas id="screen" width="400" height="400"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("screen"); 
var ctx = canvas.getContext("2d"); 
</script>

Firefox The embarrassment of 3.0.x

Although Firefox 3.0.x supports the canvas element, it is not implemented in full compliance with the specification. The fillText and measureText methods in the specification are replaced by several Firefox-specific methods in Firefox 3.0.x. Therefore, when using Canvas in Firefox 3.0.x, you need to first fix the differences between these methods in different browsers.

The following code is taken from the Mozilla Bespin project, which corrects the inconsistency between the Canvas Context object in Firefox 3.0. fillText and its related methods and properties.

Hello, Canvas!

After some preliminary understanding of Canvas, we started to write our first Canvas program, another branch of the famous HelloWorld "Hello, Canvas":

function fixContext(ctx) { 
// * upgrade Firefox 3.0.x text rendering to HTML 5 standard 
if (!ctx.fillText && ctx.mozDrawText) { 
ctx.fillText = function(textToDraw, x, y, maxWidth) { 
ctx.translate(x, y); 
ctx.mozTextStyle = ctx.font; 
ctx.mozDrawText(textToDraw); 
ctx.translate(-x, -y); 
}; 
} 
// * Setup measureText 
if (!ctx.measureText && ctx.mozMeasureText) { 
ctx.measureText = function(text) { 
if (ctx.font) ctx.mozTextStyle = ctx.font; 
var width = ctx.mozMeasureText(text); 
return { width: width }; 
}; 
} 
// * Setup html5MeasureText 
if (ctx.measureText && !ctx.html5MeasureText) { 
ctx.html5MeasureText = ctx.measureText; 
ctx.measureText = function(text) { 
var textMetrics = ctx.html5MeasureText(text); 
// fake it 'til you make it 
textMetrics.ascent = ctx.html5MeasureText("m").width; 
return textMetrics; 
}; 
} 
// * for other browsers, no-op away 
if (!ctx.fillText) { 
ctx.fillText = function() {}; 
} 
if (!ctx.measureText) { 
ctx.measureText = function() { return 10; }; 
} 
return ctx; 
}

Run the example, Canvas object The area displays "Hello, World!", which is exactly what ctx.fillText("Hello, World!", 20, 20); in the code does.

fillText and related properties

fillText method is used to display text in Canvas. It can accept four parameters, the last one of which is optional:

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

where maxWidth represents the maximum width when displaying text, which can prevent text from overflowing. However, I found in testing that there is no effect when maxWidth is specified in Firefox and Chomre.

Before using the fillText method, you can adjust the font of the displayed text by setting the font attribute of the Context. In the above example, I used "20pt Arial" as the font of the displayed text. You can set different values ​​yourself to see the font. specific effects.

The above is the content of HTML5 Canvas Getting Started (1) - Basic Concepts. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!