The foundation of HTML5 Canvas (i.)

I. Detecting if the browser supports canvas

if (!canvas | |! Canvas.getcontext) {    return;}

You can also use the Modernizr.js library, Modernizr is an easy-to-use lightweight library that detects the support of various web technologies.

Two. Properties of the canvas

main attribute : id : ID used in JavaScript code to specify the name of a particular <canvas> tag width ;: The width of the canvas, in pixels height ; The height of the canvas, in pixels.

Other properties :,,,,, tableindex title class accesskey dir draggable , hidden .

Three. Get a 2D environment

The getContext() HTML5 2D Environment Object (CANVASRENDERINGCONTEXT2D) can be obtained by invoking the method of the Canvas object. The object contains all the methods and properties required to draw on the canvas. The upper-left corner of the canvas is the origin (0,0), the axis down, and the right is the positive direction.

What can you do after getting a 2D environment? There are many things that can be done, such as use,,,,,,,, strokeStyle fillStyle  globalAlpha lineWidth lineCap line join miterLimit shadowOffsetX

,,,,,,,, these properties and some ways to make games and animations. shadowOffsetY shadowBlur shadowColor global font CompositeOperation textAlign textBaseline

Four. Use canvas

In the HTML document, this is usually the case:

<id= "Canvas"  width= "500px"  height= "500px" ></ Canvas >

注：对于canvas的宽和高，要在标签里定义，因为canvas的属性width和height和CSS里的width和height是不一样 的，canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而css的width和height是canvas在 浏览器中被渲染的高度和宽度。但是可以利用css的width和height来缩放canvas。

Get Canvas objects and 2D environments in javascript:

var thecanvas = document.getElementById ("canvas"); var context = Thecanvas.getcontext ("2D");

Five. Practical application (guess the alphabet game: The computer randomly gives a letter, the user guesses what the letter is, if not, it will prompt you to guess the big or small)

<! DOCTYPE html>Window.addeventlistener ("Load", Eventwindowload,false); varDebugger =function() {}; Debugger.log=function(message) {//Debug Output Information        Try{console.log (message); }Catch(Exception) {return; }    }    functioneventwindowload () {Canvasapp (); }    functionCanvasapp () {if(!canvas | |!Canvas.getcontext) {            return; }Else{            varThecanvas = document.getElementById ("Canvas"); varContext = Thecanvas.getcontext ("2d"); varGuess = 0; varmessagevarLetters = [            "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "s", "T", "U", "V", "w", "X", "Y", "Z"            ]; varToday =NewDate (); varLettertoguess = ""; varHigherorlower = ""; varlettersguessed; varGameover =false;                        Initgame (); functionInitgame () {varLetterindex = Math.floor (Math.random () *letters.length); Lettertoguess=Letters[letterindex]; Guess= 0; Lettersguessed= []; Gameover=false; Window.addeventlistener ("KeyDown", eventkeypressed,true);            Drawscreen (); }                        functioneventkeypressed (e) {if(!Gameover) {                    varletterpressed =String.fromCharCode (E.keycode); Letterpressed=letterpressed.tolowercase (); Guess++;                    Lettersguessed.push (letterpressed); if(letterpressed = =lettertoguess) {Gameover=true; }Else{Letterindex=Letters.indexof (lettertoguess); Guessindex=Letters.indexof (letterpressed);                        Debugger.log (Guessindex); if(Guessindex < 0) {Higherorlower= "That's not a letter"; }Else if(Guessindex >Letterindex) {Higherorlower= "Lower"; }Else{higherorlower= "Higher";                }} drawscreen (); }            }            functionDrawscreen () {Context.fillstyle= "#ffffaa"; Context.fillrect (0, 0, 500, 300); Context.strokestyle= "#000000"; Context.strokerect (5,5,490, 290); Context.textbaseline= "Top"; Context.fillstyle= "#000000"; Context.font= "10px"; Context.filltext (Today,150, 10); Context.fillstyle= "#ff0000"; Context.font= "14px"; Context.filltext (Message,125, 30); Context.fillstyle= "#109910"; Context.font= "16px"; Context.filltext ("Guesses:" + guess, 125, 50); Context.fillstyle= "#000000"; Context.font= "16px"; Context.filltext ("Higherorlower:" + Higherorlower, 150, 125); Context.fillstyle= "#ff0000"; Context.font= "16px"; Context.filltext ("Letter guessed:" + lettersguessed.tostring (), 10, 260); if(gameover) {Context.fillstyle= "#ff0000"; Context.font= "40px"; Context.filltext ("You got it!", 150, 180); }            }        }    }</script>The knowledge points used in the above example:
context.fillStyle: Defines the color of the context.strokeStyle fill;: Defines the color of  context.fillRect(x, y,width,height) the fill edge;: Draws a rectangle that is the x-coordinate of the upper-left corner of the drawn rectangle, the x y- y coordinate  width  of the upper-left corner of the drawn rectangle, : Is the width of the rectangle drawn  height  , the height of the rectangle being context.font drawn;: Defines the font size and font context.textBaseLine for the drawn text;: A baseline that defines the alignment of the text, with a value of ,,,,: Define the text to be drawn, the top bottom middle hanging text content to be drawn, the x-coordinate where the text is placed, and the y-coordinate of the placement of the text. ideographic；  context.fillText(text, x, y)  text x y
The foundation of HTML5 Canvas (i.)