[HTML5]模仿Flash的幀式動畫2[實例]筆觸軌跡
(2011-01-29 20:08:22)
轉載▼
| 分類： 學習筆記 |
模仿Flash幀式內容來源於上篇Blog，對部分內容作了修改。運行起來後的效果還是很不錯的，還有時間的話打算模仿成http://soytuaire.labuat.com/這麼炫的格式~不過有難度哦，加油就好了
第一個文件spirit.js
var Sprite = function(speed) {this.speed = speed;};Sprite.prototype = {draw : function() {
},move : function() {this.x += this.speed.x;this.y += this.speed.y;if (this.childs != null&& this.childs.length> 0) {for ( var i =0; i < this.childs.length; i++) {this.childs[i].speed= this.speed;this.childs[i].move();}}},a : function(sprite) {if (this.childs == null)this.childs =[];this.childs.push(sprite);},drawChild : function() {if (this.childs != null&& this.childs.length> 0) {for ( var i =0; i < this.childs.length; i++) {this.childs[i].draw();}}}};
var Canvas = function() {this.interval = null;this.sprites = [];};Canvas.prototype = {begin : function() {this.interval =setInterval((function(param) {returnfunction() {param.render();};})(this), 20);},render : function() {//M.trace(this.sprites.length)this.ctx.clearRect(-800, -800,1600, 1600);for ( var i in this.sprites){if (typeof(this.sprites[i]) == "function")continue;this.sprites[i].draw();}},addSprite : function(name, sprite) {this.sprites[name] =sprite;},stop : function() {clearInterval(this.interval);},clear : function() {for ( var i in this.sprites){if (typeof(this.sprites[i]) == "function")continue;if(this.sprites[i].x > 800&& this.sprites[i].y> 800) {deletethis.sprites[i];}}}};
var XCircle = function(ctx, x, y, radius, speed, config) {
this.ctx = ctx;this.x = x;this.y = y;this.radius = radius;this.speed = speed;this.config = {strokeStyle : "#000",lineWidth : "1"};// M.dom.mixin(this.config, config);};XCircle.prototype = new Sprite(this.speed);
XCircle.prototype.draw = function() {this.ctx.beginPath();this.ctx.lineWidth = this.config.lineWidth;this.ctx.strokeStyle =this.config.strokeStyle;this.ctx.arc(this.x, this.y, this.radius, 0,Math.PI * 2, true);// this.ctx.stroke();this.ctx.fill();this.drawChild();};
第二個文件 ex_canvas.htm
<!DOCTYPE html><html><head><scriptsrc="spirit.js"></script><meta charset="utf-8"><title>Insert titlehere</title></head><body>
<canvas id="myCanvas" style="border:1px solid#c3c3c3;" width_="800"height="600"onmousemove="followMouse(event)">Your browser does not support the canvas element.</canvas>
<scripttype="text/javascript">var c =document.getElementByIdx_x_x("myCanvas");var ctx = c.getContext("2d");ctx.fillStyle = "#000000";
var can = new Canvas();can.ctx = ctx;can.begin();//開始渲染setInterval(function() {for ( var i in can.sprites){if (typeof(can.sprites[i]) == "function")continue;can.sprites[i].move()}
}, 30);
var i = 0;var Speed = {x : 1,y : 1};var circle = new XCircle(ctx, -10, -10, 10,{x : 0,y : 0});
can.addSprite(i, circle);function followMouse(e) {circle.x = e.clientX - 5;circle.y = e.clientY - 5;}
setTimeout("poo()", 10);
function poo() {if (i >=200)i = 0;i++;Speed.x = 20 -(circle.x)/100;Speed.y = (300 - circle.y) /40;var c = new XCircle(ctx,circle.x, circle.y, 5 + Math.random() * 10,Speed);can.addSprite(i, c);
setTimeout("poo()",10);}</script></body></html>
分享：
0
喜歡
0
贈金筆 閱讀(48)┊ 評論 (0)┊ 收藏(0) ┊轉載 ┊ 喜歡▼ ┊列印┊舉報
| 已投稿到： |
|
|---|
前一篇：[轉][HTML5]模仿Flash的幀式動畫 後一篇：[轉]《HTML5設計原理》—JeremyKeith在Fronteers2010上的主題演講
推薦閱讀：
※身弱傷官格之人，一生的命運軌跡
※八字人生軌跡 （九）
※渣男與好男人，各自的人生軌跡。
※一個人的命運軌跡能算準？二十多年算命經驗的命理師告訴你答案
※令人驚嘆的運動軌跡