6_2_canvas_clipping+resize.htm

/uuCanvas.js/demo.canvas/6_2_canvas_clipping+resize.htm

http://uupaa-js-spinoff.googlecode.com/
HTML | 238 lines | 210 code | 28 blank | 0 comment | 0 complexity | 5134a09ab69c548faced66764c31e866 MD5 | raw file
Possible License(s): Apache-2.0

<!doctype html><html><head>

    <title>A canvas clip example</title>

    <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">

    <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">



<script src="../uuCanvas.js"></script>



<script>

function xcanvas() {

    drawShape(document.getElementById('slcanvas'), 0, 1);

    drawShape(document.getElementById('vmlcanvas'), 0, 1);

    drawShape(document.getElementById('flashcanvas'), 0, 1);

}

function matrix() {

    drawShape(document.getElementById('slcanvas'), 1);

    drawShape(document.getElementById('vmlcanvas'), 1);

    drawShape(document.getElementById('flashcanvas'), 1);

}

function redraw() {

    drawShape(document.getElementById('slcanvas'), 0, 1);

    drawShape(document.getElementById('vmlcanvas'), 0, 1);

    drawShape(document.getElementById('flashcanvas'), 0, 1);

}



var globalAlpha = 1.0;

function switchAlpha() {

    globalAlpha -= 0.2;

    drawShape(document.getElementById('slcanvas'));

    drawShape(document.getElementById('vmlcanvas'));

    drawShape(document.getElementById('flashcanvas'));

}



var lineWidth = 1.0;

function switchLineWidth() {

    lineWidth += 2;

    drawShape(document.getElementById('slcanvas'));

    drawShape(document.getElementById('vmlcanvas'));

    drawShape(document.getElementById('flashcanvas'));

}



function drawShape(canvas, matrix, redraw){

    if (!canvas.getContext){ return; }



    var ctx = canvas.getContext('2d');



    ctx.clear();

    ctx.fillStyle = "black";

    ctx.fillRect(0,0,canvas.width,canvas.height);



    if (matrix) {

        ctx.translate(-10, 5);

        ctx.scale(1.2, 0.8);

        ctx.rotate(5 * Math.PI / 180);

    }

    ctx.globalAlpha = globalAlpha;

    ctx.lineWidth = lineWidth;



    if (redraw) {

        ctx.translate(canvas.width / 2, canvas.height / 2);



    }

    // Create a circular clipping path

    ctx.beginPath();

    ctx.arc(0,0,60,0,Math.PI*2,true);

    ctx.clip();



    // draw background

    var lingrad = ctx.createLinearGradient(0,-75,0,75);

    lingrad.addColorStop(0, '#232256');

    lingrad.addColorStop(1, '#143778');



    ctx.fillStyle = lingrad;

    ctx.fillRect(-75,-75,150,150);



    // draw stars

    for (var j=1;j<50;j++){

        ctx.save();

        ctx.fillStyle = '#fff';

        ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150));

        drawStar(ctx,Math.floor(Math.random()*4)+2);

        ctx.restore();

    }

}



function drawStar(ctx,r){

    ctx.save();

    ctx.beginPath()

    ctx.moveTo(r,0);

    for (var i=0;i<9;i++){

        ctx.rotate(Math.PI/5);

        if(i%2 == 0) {

            ctx.lineTo((r/0.525731)*0.200811,0);

        } else {

            ctx.lineTo(r,0);

        }

    }

    ctx.closePath();

    ctx.fill();

    ctx.restore();

}



function reduce() {

    resize("slcanvas", -10, -10);

    resize("vmlcanvas", -10, -10);

    resize("flashcanvas", -10, -10);

}

function wide() {

    resize("slcanvas", 10, 10);

    resize("vmlcanvas", 10, 10);

    resize("flashcanvas", 10, 10);

}

function resize(id, width, height) {

    var node = document.getElementById(id),

        ctx = node.getContext("2d"),

        w = parseInt(node.width) + width,

        h = parseInt(node.height) + height;



    if (ctx.clear) {

        ctx.clear();

    } else {

        ctx.clearRect(0, 0, w, h);

    }

    node.width  = w;

    node.height = h;

    if (ctx.resize) {

        ctx.resize(w, h);

    }

}



</script>

    <style type="text/css">

      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}

      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }

      canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }

      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }

    </style>

  </head>

  <body>

    <h1>A canvas <code>clip</code> example</h1>

    <div>

      <input type="button" value="[+] wide" onclick="wide()" />

      <input type="button" value="[-] reduce" onclick="reduce()" />

      <input type="button" value="[R] redraw" onclick="redraw()" />



      <input type="button" value="matrix effect" onclick="matrix()" />

      <input type="button" value="alpha -0.2" onclick="switchAlpha()" />

      <input type="button" value="lineWidth +2" onclick="switchLineWidth()" />

      <br />

      <canvas id="slcanvas" class="sl" width="150" height="150"></canvas>

      <canvas id="vmlcanvas" class="vml" width="150" height="150"></canvas>

      <canvas id="flashcanvas" class="flash" width="150" height="150"></canvas>

      <pre>

function xcanvas() {

    draw(document.getElementById('slcanvas'));

    draw(document.getElementById('vmlcanvas'));

    draw(document.getElementById('flashcanvas'));

}

function matrix() {

    draw(document.getElementById('slcanvas'), 1);

    draw(document.getElementById('vmlcanvas'), 1);

    draw(document.getElementById('flashcanvas'), 1);

}



var globalAlpha = 1.0;

function switchAlpha() {

    globalAlpha -= 0.2;

    drawShape(document.getElementById('slcanvas'));

    drawShape(document.getElementById('vmlcanvas'));

    drawShape(document.getElementById('flashcanvas'));

}



var lineWidth = 1.0;

function switchLineWidth() {

    lineWidth += 2;

    drawShape(document.getElementById('slcanvas'));

    drawShape(document.getElementById('vmlcanvas'));

    drawShape(document.getElementById('flashcanvas'));

}



function draw(canvas, matrix){

    if (!canvas.getContext){ return; }



    var ctx = canvas.getContext('2d');



    ctx.clear();

    if (matrix) {

        ctx.translate(-10, 5);

        ctx.scale(1.2, 0.8);

        ctx.rotate(5 * Math.PI / 180);

    }

    ctx.globalAlpha = globalAlpha;

    ctx.lineWidth = lineWidth;



    ctx.fillRect(0,0,150,150);

    ctx.translate(75,75);

    // Create a circular clipping path

    ctx.beginPath();

    ctx.arc(0,0,60,0,Math.PI*2,true);

    ctx.clip();



    // draw background

    var lingrad = ctx.createLinearGradient(0,-75,0,75);

    lingrad.addColorStop(0, '#232256');

    lingrad.addColorStop(1, '#143778');



    ctx.fillStyle = lingrad;

    ctx.fillRect(-75,-75,150,150);



    // draw stars

    for (var j=1;j<50;j++){

        ctx.save();

        ctx.fillStyle = '#fff';

        ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150));

        drawStar(ctx,Math.floor(Math.random()*4)+2);

        ctx.restore();

    }

}



function drawStar(ctx,r){

    ctx.save();

    ctx.beginPath()

    ctx.moveTo(r,0);

    for (var i=0;i<9;i++){

        ctx.rotate(Math.PI/5);

        if(i%2 == 0) {

            ctx.lineTo((r/0.525731)*0.200811,0);

        } else {

            ctx.lineTo(r,0);

        }

    }

    ctx.closePath();

    ctx.fill();

    ctx.restore();

}

      </pre>

    </div>

  </body>

</html>