When the HTML5 Storm strikes, the biggest change is the canvas, a wonderful drawing board. That's right! Our UI will become more vivid through it.
Won't you use this new element? Then, read the following articles and you will get some gains.
-------------------------------- Non-gorgeous split line --------------------------------
Let's take a look at canvas's new things through a few questions.
Q1: What is convas?
Convas is a rectangle and a canvas.
Q2: how to define convas?
<Canvas id = "canvas" width = "200" Height = "100"> </canvas> -- its size is controlled by width and height, similar to the DIV element.
Q3: how to operate convas?
Javascript
-------------------------------- Non-gorgeous split line --------------------------------
Okay. You should have a little understanding of canvas here. So let's continue.
<canvas id="canvas" width="200"height="100"></canvas>
We have defined a canvas where strings can be written. As follows:
<Canvas id = "canvas" width = "200" Height = "100"> <p> my content ~! -V-</P> </canvas>
OK. The following figure is displayed.
<-Yes. This is a picture.
Oh? Nothing left blank. OK. You have not read the following sentence correctly.
The content in the middle of the canvas is only displayed when the canvas label is unavailable.
Canvas elements are mainly operated through Js. The main operations are as follows:
/* Step 1: Obtain the canvas object. */Var canvas = document. getelementbyid ("canvas");/* Step 2: Obtain the paint brush from the canvas object (like the traditional advanced language) */var context2d = canvas. getcontext ("2D ");
------ API -----
Void filltext (text, left, top, [maxwidth]);
Void filltext ("content of the text to be drawn", "horizontal coordinate of relative canvas", "vertical coordinate of relative canvas", ["Maximum number of strings"]);
This is the last parameter of the first API function that we use. It is optional.
------ Complete code ----
Now we have provided the complete code: the first HTML5 program was born.
<! Doctype HTML> <body> <canvas id = "canvas" width = "200" Height = "100"> <p> my content ~! -V-</P> </canvas> <SCRIPT type = "text/JavaScript"> window. onload = function () {var canvas = document. getelementbyid ("canvas"); var context2d = canvas. getcontext ("2D"); context2d. font = "30px Times New Roman"; context2d. filltext ("hellocanvas! ", 10, 35) ;}</SCRIPT> </body>
Note the browser version: I use firefox11.0.
The effect is as follows.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
