Getting Started with HTML5 Canvas (1) - Basic Concepts_html5 Tutorial Skills

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 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.

Get started with Canvas

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

Copy code

The code is as follows:

Of course, this simply creates a Canvas object and does not perform any operations on it. The canvas at this time The element looks no different from the div element, nothing can be seen on the page:)
In addition, the size of the canvas element can be specified through the width and height attributes, which 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 It is performed by obtaining the Canvas operation context through a method getContext of the Canvas object. 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>

Tip: You can modify part of the code before running

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

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; }
提示：您可以先修改部分代码再运行

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas> <script type="text/javascript"> (function() { var canvas = document.getElementById("screen"); var ctx = fixContext(canvas.getContext("2d")); ctx.font = "20pt Arial"; ctx.fillText("Hello, Canvas!", 20, 20); ctx.fillText("www.xujiwei.com", 20, 50); 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; } })(); </script>
提示：您可以先修改部分代码再运行

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

fillText and related attributes

The

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, in my tests, I found that specifying maxWidth in Firefox and Chomre has no effect.

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. Look at the specific effects.

End

That’s it for now, I will write this series while reading the specifications:)

Reference materials

1. HTML5 Canvas, a new stage for scripting languages, hred

2. The Canvas Element, WHATWG

3. Canvas Tutorial Chinese, Mozilla

4. Canvas Tutorial English, Mozilla

5. canvas support in Opera, Opera