HTML5 's Canvas (case) __html

* * Stars Flashing animation * *

1. How to carousel a sequence frame on a picture

2, canvas several main drawing api:drawimage (), save (), restore ().

3. How to handle mouse events

Notes:

Window API:

Loop-Invoke three methods:
Requestanimframe (Fcuntion () {}); Determine the time of each callback (cycle time) based on computer performance, more scientific and more efficient
settimeout (function () {},time); Wait for the execution to be executed after the end of x seconds
SetInterval (Funtion () {},time); Execute again, execute first, then execute again after x seconds

DrawImage ():

DrawImage (X,y);

DrawImage (Img,x,y,width,height);

DrawImage (IMG, pictures, SX, pictures, sy, pictures, swidth, pictures, Sheight, canves.x, Canvas.y, Canvan.width, canvas.height);

DrawImage (IMG, implementation, use, swidth,sheight,x,y)

Mouse control Events (main code):

1,

Define a class:

var starobj = function () {
   this.x;
   This.y;
   THIS.YSPD;
   This.picno;
   This.timer;
   This.beta;
}

2,

Document.addeventlistener ("MouseMove", mousemove,false);
function MouseMove (e) {//Detect mouse Movement
if (E.offsetx | | e.layerx) {
var px = E.offsetx = = Undefined?e.layerx:e.offsetx;
var py = E.offsety = = undefined?e.layerxy:e.offsety;
Console.log (px);
}

3,

Globalalpha Global Transparency
Print:

Console.log (Switchy);

Api:

Save ();
Restore ();

You can control that any attribute between save and restore only works on this piece of content, but it doesn't work for anything else.

To achieve the source code:

Star.html:

<! DOCTYPE html>
Star.js

Create class var starobj = function () {this.x;

	This.y;

	THIS.YSPD;

	This.picno;

	This.timer;
This.beta;
	}//define method//Initialize StarObj.prototype.init = function () {this.x = Math.random () * girlwidth + padLeft;

	This.y = Math.random () * girlheight + padtop; THIS.YSPD = Math.random () * 0.6-0.3; [0,2) [-1, 1] this.xspd = math.random () * 0.2-0.1;
	[0,2) [-1, 1] this.picno = Math.floor (Math.random () * 7);

	This.timer = 0;
This.beta = Math.random () * Math.PI * 0.5;
	} starObj.prototype.update = function () {this.xspd = Math.random () * 0.2-0.1;//[0,2) [-1, 1) this.x + = THIS.XSPD;

	This.y + = THIS.YSPD;
	if (This.x > (padLeft + girlwidth) | | this.x < (PADLEFT-10)) This.init ();

	else if (This.y > (padtop + girlheight) | | This.y < (PADTOP-10)) This.init ();
	This.timer + = Deltatime;
		if (This.timer >) {this.picno = 1;
		This.picno%= 7;
	This.timer = 0;
	} StarObj.prototype.draw = function () {This.beta + = Deltatime * 0.005;
	Ctx.save (); Ctx.globAlalpha = Math.sin (this.beta) * ALIVE;
	Console.log (Alive);
	Console.log (Ctx.globalalpha);
	Ctx.drawimage (Starpic, This.picno * 7, 0, 7, 7, This.x, This.y, 17, 17);
Ctx.restore ();
		function Drawstars () {for (var i = 0; i < num; i++) {stars[i].update ();
		Stars[i].draw ()///each member will be drawn on Cavans}} function Aliveupdate () {if (switchy) {alive = 0.03;
		if (Alive > 0.7) {alive = 0.7;
		} else {alive = 0.03;
		if (Alive < 0) {alive = 0; }
	}
}
 
 Main.js 
 
 

var can;

var ctx;
var W;

var h;
var padLeft = 10;

var padtop = 10;
var girlwidth = 780;

var girlheight = 580;
var deltatime;

var lasttime;
var girlpic = new Image ();

var starpic = new Image ();
var stars = [];

var num = 120;

var alive = 0;

var switchy = false;
	function init () {can = document.getElementById ("Canvas");

	CTX = Can.getcontext ("2d");
	W = can.width;

	h = can.height;

	Document.addeventlistener (' MouseMove ', MouseMove, false);
	GIRLPIC.SRC = "Src/girl.jpg";
STARPIC.SRC = "Src/star.png";
	The method for using the class for (var i = 0; i < num i++) {stars[i] = new Starobj ();//define a variable stars[i].init ();
	} lasttime = Date.now ();
Gameloop ();
	function Gameloop () {window.requestanimframe (gameloop);
	var now = Date.now ();
	Deltatime = Now-lasttime;

	Lasttime = Now;
	Fillcanvas ();

	Drawgirl ();

	Drawstars ();
Aliveupdate ();
	function Fillcanvas () {ctx.fillstyle = ' #FFCCFF ';
Ctx.fillrect (0, 0, W, h); function Drawgirl () {ctx.drawimage (Girlpic, PadLeft, Padtop, Girlwidth, girlheight);
		} function MouseMove (e) {if (E.offsetx | | e.layerx) {var px = E.offsetx = = undefined? e.layerx:e.offsetx; var py = E.offsety = = undefined?

		E.layery:e.offsety; if (px > PadLeft && px < (padLeft + girlwidth) && py > Padtop && py < (padtop + girlhe
		ight)) {Switchy = true;
		else {switchy = false; }
	}
}
Commonfunctions.js 
Window.requestanimframe = (function () {return Window.requestanimationframe | | window.webkitrequestanimationframe | | Window.mozrequestanimationframe | | Window.orequestanimationframe | |
		Window.msrequestanimationframe | | function (/* function Framerequestcallback/callback,/* domelement element */Element) {return window.settimeout CA
		Llback, 1000/60);
};

})();

Calculates the square function of the length calLength2 (x1, y1, x2, y2) {return Math.pow (X1-X2, 2) + Math.pow (Y1-y2, 2);
	Get random color function Randomcolor () {var col = [0, 1, 2];
	Col[0] = math.random () * 100 + 155;
	Col[0] = col[0].tofixed ();
	COL[1] = math.random () * 100 + 155;
	COL[1] = col[1].tofixed ();
	COL[2] = math.random () * 100 + 155;
	COL[2] = col[2].tofixed ();
	var num = Math.floor (Math.random () * 3);
	Col[num] = 0;

Return "Rgba (" + col[0] + "," + col[1] + "," + col[2] + ",";}
	Angle function Lerpangle (A, B, t) {var d = b-a;
	if (d > Math.PI) d = d-2 * MATH.PI;
	if (d <-math.pi) d = d + 2 * MATH.PI; Return a + D * t; function Inoboundary (Arrx, Arry, L, R, T, b) {//detection in the range of L R t b arrx > L && Arrx < R && A
Rry > t && arry < b;
	function RGBColor (R, G, b) {r = Math.Round (R * 256);
	g = Math.Round (g * 256);
	b = Math.Round (b * 256);

Return "Rgba (" + R + "," + G + "," + B + ", 1)";}
	function Rgbnum (R, G, b) {r = Math.Round (R * 256);
	g = Math.Round (g * 256);
	b = Math.Round (b * 256);

Return "Rgba (" + R + "," + G + "," + B;}
	function rnd (m) {var n = m | | 1;
return Math.random () * n;
	function Raterandom (m, n) {var sum = 0;

	for (var i = 1; i < (N-M); i++) {sum = i;

	var ran = math.random () * SUM;
		for (var i = 1; i < (N-M); i++) {ran = i;
		if (ran < 0) {return i-1 + m;
	}} function distance (x1, y1, x2, y2, l) {var x = Math.Abs (X1-X2);
	var y = math.abs (y1-y2);
	if (x < l && y < L) {return true;
return false; function Aabbbox (Object1, W1, H1, Object2, W2, H2, OverlAP) {A1 = object1.x + overlap;
	B1 = object1.x + w1-overlap;
	C1 = object1.y + overlap;

	D1 = Object1.y + h1-overlap;
	A2 = object2.x + overlap;
	B2 = object2.x + w2-overlap;
	C2 = object2.y + overlap;

	D2 = Object2.y + h2-overlap; if (A1 > B2 | | B1 < A2 | | C1 > D2 | |
	D1 < C2) return false;
else return true;
	function Dis2 (x, y, x0, y0) {var dx = x-x0;
	var dy = y-y0;
return DX * dx + dy * dy;
	function Rndi2 (m, n) {var a = Math.random () * (n-m) + M;
Return Math.floor (a); }