努力,成长,提高

在追求中进步
数据加载中……
html5 基于canvas的基础类设计
先给大家看一个demo
http://www.koooi.com/html5/
代码很简单
页面上面加一个<canvas style="border:1px solid" id="canvas" width="1000" height="800">
            <p>
                Your browser does not support the canvas element.
            </p>
        </canvas>
然后javascript中写上
var canvas = null;
var ctx = null;
var score = 0;
var num = 51;
function getRandomInt(a, b){
    
return Math.floor(Math.random() * (b - a + 1)) + a;
    
}

window.onload 
= init;

function init(){
    canvas 
= document.getElementById('canvas');
    scoreID 
= document.getElementById('score');
    ctx 
= canvas.getContext('2d');
    
//    setInterval(draw, 1000 / FPS);
    
    controller 
= new ERIC.CanvasController(ctx, canvas.width, canvas.height);
    controller.animateStopBySignal();
    canvas.onclick 
= function(e){
        
var mousex = e.clientX;
        
var mousey = e.clientY;
        
var relativex = mousex - canvas.offsetLeft;
        
var relativey = mousey - canvas.offsetTop;
        
var len = controller.canvasObjectList.length;
        
var infig = false;
        
for (i = len - 1; i >= 0; i--) {
            
if (controller.canvasObjectList[i].isInFigure(relativex, relativey)) {
                score 
= score + 10;
                infig 
= true;
                controller.canvasObjectList[i].removeFromControl();
            }
        }
        
if (!infig) {
            score 
= score - 10;
        }
        scoreID.innerHTML 
= score;
    }
    
    ERIC.run(
function test(){
        
var t = getRandomInt(00);
        
if (t == 0) {
            num
--;
            
if(num==0){
                ERIC.stop();
                
return;
            }
            
var cir1 = new ERIC.Circle(getRandomInt(70930), getRandomInt(70730), 5);
            cir1.setTriggerDelete(
function(){
                
return this.radius >= 40;
            });
            cir1.setAction(
function(){
                
this.radius = this.radius + 1;
            });
            controller.add(cir1);
        }
    }, 
400);
}

很简单的代码,利用了我写的基础类ERIC.Circle Eric.CanvasController 以及ERIC.Run
使用简介:
1.先实例化ERIC.
CanvasController,假设实例名字controller
2.实例化一个ERIC.BasicFigure类的子类的对象,现在EricUtils.js只提供了一个扩展类Circle,假设实例名字为cir
3.设置cir实例的动作和删除的条件。动作意思是每一个动画要执行什么操作,比如圆的半径加1, 或者圆心移动。删除的条件比如半径大于50就从画布当中删除掉,不再显示这个圆。
cir1.setTriggerDelete(function(){
                return this.radius >= 40;
            });
            cir1.setAction(function(){
                this.radius = this.radius + 1;
            });
4.把cir添加到controller中。controller.add(cir)
5.调用controller.animate(); 此方法会以每秒30帧来画出cir对象,每帧结束执行cir在第三步设置的动作。到达删除条件会删除掉该object,直到没有object在controller当中。
6.也可以调用controller.animateStopBySignal()方法,动作和5相同,但是会一直进行渲染,这样适合于临时添加object到controller当中,添加进去以后马上就可以被渲染,直到满足被删除的条件。渲染结束需要调用controller.signalStop()

基础类下载地址http://www.koooi.com/html5/js/EricUtils.js
当然,这只是一个框架,以后要添加更多的功能,如果您对于html5有兴趣,打算和我一起来开发,欢迎联系我
希望可以起到抛砖引玉的作用。
QQ627四23四四三

posted on 2010-06-13 02:07 孔阳 阅读(1922) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: