zoukankan      html  css  js  c++  java
  • canvas 实现微信小游戏

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

    var timer;
    var iStop = false;
    var rotateSpeed = 0;
    var endLines = [{'deg':0},{'deg':90},{'deg':180},{'deg':270}];
    var runSpeed = 0;
    var runLines = [{'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':0}];

    function draw(){
    cxt.save();
    cxt.translate(300, 300);
    cxt.rotate(rotateSpeed*Math.PI/180);
    cxt.beginPath();
    cxt.arc(0, 0, 50, 0, 360*Math.PI/180, false);
    cxt.stroke();
    cxt.closePath();

    for(var i=0; i<endLines.length; i++){
    cxt.save();
    cxt.rotate(endLines[i].deg*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(50, 0);
    cxt.lineTo(150, 0);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
    }
    cxt.restore();

    for(var j=0; j<runLines.length; j++){
    cxt.save();
    cxt.beginPath();
    cxt.moveTo(runLines[j].x1, runLines[j].y1);
    cxt.lineTo(runLines[j].x2, runLines[j].y2);
    cxt.stroke();
    cxt.closePath();
    cxt.restore();
    }

    var _runLines = [];
    for(var k=0; k<runLines.length; k++){
    if(runLines[k].y2 < 450){
    for(var m=0; m<endLines.length; m++){
    if((endLines[m].deg + rotateSpeed)%360 == 90){
    iStop = true;
    }
    }
    }
    if(runLines[k].y2 == 350){
    endLines.push({'deg':90-rotateSpeed});
    }else{
    runLines[k].y1 -= runLines[k].speed;
    runLines[k].y2 -= runLines[k].speed;
    _runLines.push(runLines[k]);
    }
    }
    runLines = _runLines;

    if((++rotateSpeed) == 360){
    rotateSpeed = 0;
    }

    }

    function erase(){
    cxt.clearRect(0, 0, canvas.width, canvas.height);
    }

    document.onmousedown = function(){
    runLines.push({'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':10});
    };

    window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame;

    window.cancelRequestAnimationFrame =
    window.cancelRequestAnimationFrame ||
    window.mozCancelRequestAnimationFrame ||
    window.webkitCancelRequestAnimationFrame ||
    window.msCancelRequestAnimationFrame;

    function animate() {
    erase();
    draw();
    if(iStop){
    cancelRequestAnimationFrame(timer);
    }else{
    timer = requestAnimationFrame(animate);
    }
    }

    animate();

  • 相关阅读:
    《入门经典》——6.15
    《Linear Algebra and Its Application》-chaper1-行化简法解决线性方程组
    《算法实战策略》-chaper19-队列、栈和双端队列
    《Linear Algebra and Its Applications》-chaper1-向量方程、矩阵方程和线性方程组
    辛普森法则
    《训练指南》——6.15
    《入门经典》——6.21
    《算法问题实战策略》-chaper13-数值分析
    Scheme 中的 pair 和 list 简述
    C. Friends
  • 原文地址:https://www.cnblogs.com/liubu/p/7846949.html
Copyright © 2011-2022 走看看