html5 Canvas測試大雜燴--多重Layers & Pre3d

This text is displayed if your browser does not support HTML5 Canvas. This text is displayed if your browser does not support HTML5 Canvas.

這是Jimmy's papa參考許多網站的範例程式後,覺得有些蠻有參考價值的,乾脆作個測試大雜燴,裡頭有黃澄澄的金色立方體是參考Pre3d的範例,而很炫的旋轉曲線漩渦效果是參考HTML5 Canvas Machines Vortex,分別繪製在3個重疊的canvas畫布上
以下是javascript程式碼

<section>

<div id="canvasesdiv" style="position:relative; width:500px; height:500px">
<canvas id="my3DCubeCanvas" style="z-index: 0;" width="500" height="500"></canvas>

<canvas id="layer1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="500px" width="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2" style="z-index: 2;position:absolute;left:0px;top:0px;" height="500px" width="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
    


<script src="pre3d.js"></script>
<script src="pre3d_shape_utils.js"></script>
<script src="demo_utils.js"></script>
<script>

function start3d() {
  var screen_canvas = document.getElementById("my3DCubeCanvas");

  var renderer = new Pre3d.Renderer(screen_canvas);

  var cube = Pre3d.ShapeUtils.makeCube(1);

  Pre3d.ShapeUtils.triangulate(cube);

  renderer.fill_rgba = new Pre3d.RGBA(1, 1, 0, 1);
  
  var state = {
    cube_rotate_y_rad: 0,
    cube_rotate_x_rad: 0,
    cube_x: 2,
    cube_y: 0
  };

  function draw() {
    renderer.transform.reset();
    renderer.transform.rotateX(state.cube_rotate_x_rad);
    renderer.transform.rotateY(state.cube_rotate_y_rad);
    renderer.transform.translate(state.cube_x, state.cube_y, 0);
    renderer.bufferShape(cube);

    // White background.
    renderer.ctx.setFillColor(1, 1, 1, 1);
    renderer.drawBackground();

    renderer.drawBuffer();
    renderer.emptyBuffer();
  }

  renderer.camera.focal_length = 2.5;
  DemoUtils.autoCamera(renderer, 0, 0, -8, 0, 0, 0, draw);

function spin_and_draw() {
    state.cube_rotate_y_rad += 0.1;
    state.cube_rotate_x_rad += 0.01;
    state.cube_x = Math.sin(state.cube_rotate_y_rad / 2) * 3;
    state.cube_y = Math.sin(state.cube_rotate_x_rad * 4) * 3;
    draw();
  };

  var ticker = new DemoUtils.Ticker(30, spin_and_draw);



  ticker.start();

  //draw();

}


start3d();
</script>

<script type="text/javascript">
var layer1;
var layer2;

var ctx1;
var ctx2;


var WIDTH = 500;
var HEIGHT = 500;
var nightcity = new Image();

var arcs=null;




function Arc(radius, startingAngle, endingAngle, width, color) {
    this.radius = radius;
    this.startingAngle=startingAngle;
    this.endingAngle=endingAngle;
    this.width=width;
    this.color=color;
    
    var speed=(Math.random() / 10) + 0.007; 

    this.speed = speed;
}

function setArcs() {
    var colors=new Array();

    colors.push("#5ef");
    colors.push("#6de");
    colors.push("#7cd");
    colors.push("#8bc");
    colors.push("#9ab");
    colors.push("#a9a");
    colors.push("#b89");
    colors.push("#c78");
    colors.push("#d67");
    colors.push("#e56");

    arcs=new Array();

    for (n=0; n<10; n++){
        var radius = (n+1) * 20;
        var width = (n+1) *6;

        var color=colors[n];

        
        var startingAngle = Math.floor(Math.random() * 2);
        var endingAngle = startingAngle + 1;
        
        arcs.push(new Arc(radius,startingAngle,
            endingAngle,width,color)); 
    }
    
}

function init() {
nightcity.src ="nightcity.png";
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
setArcs();
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");

setInterval(drawAll, 20);
}

function drawAll() {
draw1();
draw2();

}

function draw1() {
    
    var layer1=document.getElementById("layer1");
    ctx1 = layer1.getContext("2d");
    ctx1.clearRect(0, 0, WIDTH, HEIGHT);

    for (n=0; n<10; n++) {
        var thisArc=arcs[n];
        var increment=thisArc.speed;
        
        thisArc.startingAngle-=increment;
        thisArc.endingAngle-=increment;    
    }
    
    
    var centerX = 250;
    var centerY = 250;
    
    
    for (n=0; n<10; n++) {
        ctx1.beginPath();
        var thisArc = arcs[n];
        ctx1.arc(centerX,centerY,thisArc.radius,thisArc.startingAngle* 
            Math.PI, thisArc.endingAngle* Math.PI,true);

        ctx1.lineWidth=thisArc.width; 
        
        ctx1.strokeStyle=thisArc.color; 
        ctx1.stroke();
        ctx1.closePath();
    }
    
}


function draw2() {
ctx2.clearRect(0, 0, WIDTH, HEIGHT);
ctx2.drawImage(nightcity, 0, 0);
}



init();
</script>

</section>