/uuCanvas.js/demo.canvas/6_2_canvas_clipping+resize.htm
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>