Canvas basics of html5 1

Canvas basics of html5 1

1. canvas common attributes: width and height. To use canvas, you must first obtain the canvas:

 

var can = document.getElementById(canvas);var ctx = can.getContext('2d');

Each stroke on the canvas has a start and end; otherwise, the effects will be linked together.

 

 

ctx.beginPath();。。。ctx.closePath();

2. Two painting methods of the paint brush:

 

1) stroke: Non-filling method;

2) fill: fill painting;

 

ctx.beginPath();ctx.fillStyle=black;ctx.lineWidth=2;ctx.arc(250,250,5,0,360*Math.PI/180,true);ctx.fill();ctx.closePath();

ctx.beginPath();ctx.strokeStyle=black;ctx.lineWidth=8;ctx.moveTo(0,-150);ctx.lineTo(0,10);ctx.stroke();ctx.closePath();

3. Common images:

 

1) Straight Line: ctx. moveTo (x, y); ctx. lineTo (x, y );

2) circle: arc (X, Y, Radius, startAngle, endAngle, anticlockwise), meaning (center X coordinate, center Y coordinate, Radius, start angle (radian ), end angle radians, clockwise );

3) rectangle:

FillRect (X, Y, Width, Height );
StrokeRect (X, Y, Width, Height );

 

4. Coordinates:

1) translate (x, y): Set the coordinate system origin to x, y. The subsequent coordinates are relative to this standard.

2) rotate (90 * Math. PI/180) rotates 90 degrees clockwise.

3) save (): used to save the Canvas status. After saving, you can call operations such as pan, zoom, rotate, miscut, and crop of the Canvas.

4) restore (): used to restore the State saved before the Canvas. This prevents operations performed on the Canvas after the save operation from affecting subsequent painting. Save and restore must be used together (restore can be less than save, but not more). If the restore calls more than save, an Error is thrown.

5) clearRect (x, y, width, height); clear the area;

 

Instance: small clock

 

<Script type = text/javascript> var ctx = null; function aa () {var now = new Date (); var s = now. getSeconds (), m = now. getMinutes (), h = now. getHours (); h = h + m/60; h = h> = 12? H-12: h; ctx. clearRect (0, 0, 500,500); // initialize the canvas // draw the ctx dial. beginPath (); ctx. strokeStyle = blue; ctx. lineWidth = 10; ctx. arc (250,250,200, 0,360 * Math. PI/180, true); ctx. stroke (); ctx. closePath (); // draw the scale for (var I = 0; I <60; I ++) {if (I % 5 = 0) {ctx. save (); ctx. translate (250,250); ctx. rotate (I * 6 * Math. PI/180); ctx. beginPath (); ctx. strokeStyle = black; ctx. lineWidth = 8; // alert (I * 30); ctx. moveTo (0,-190); ctx. lineTo (0,-170); ctx. stroke (); ctx. closePath (); ctx. restore ();} else {ctx. save (); ctx. translate (250,250); ctx. rotate (I * 6 * Math. PI/180); ctx. beginPath (); ctx. strokeStyle = black; ctx. lineWidth = 4; // alert (I * 30); ctx. moveTo (0,-190); ctx. lineTo (0,-180); ctx. stroke (); ctx. closePath (); ctx. restore () ;}// hour hand ctx. save (); ctx. translate (250,250); ctx. rotate (h * 30 * Math. PI/180); ctx. beginPath (); ctx. strokeStyle = black; ctx. lineWidth = 8; // alert (I * 30); ctx. moveTo (0,-150); ctx. lineTo (0, 10); ctx. stroke (); ctx. closePath (); ctx. restore (); // sub-needle ctx. save (); ctx. translate (250,250); ctx. rotate (m * 6 * Math. PI/180); ctx. beginPath (); ctx. strokeStyle = # abcdef; ctx. lineWidth = 5; // alert (I * 30); ctx. moveTo (0,-160); ctx. lineTo (0, 15); ctx. stroke (); ctx. closePath (); ctx. restore (); // seconds for ctx. save (); ctx. translate (250,250); ctx. rotate (s * 6 * Math. PI/180); ctx. beginPath (); ctx. strokeStyle = red; ctx. lineWidth = 2; ctx. moveTo (0,-170); ctx. lineTo (0, 20); ctx. stroke (); ctx. closePath (); ctx. restore (); // center point ctx. save (); ctx. beginPath (); ctx. fillStyle = black; ctx. arc (250,250, 360, * Math. PI/180, true); ctx. fill (); ctx. closePath (); ctx. restore ();} window. onload = function () {var can = document. getElementById (canvas); ctx = can. getContext ('2d '); // aa ();} setInterval (aa, 1000); </script>