Salve a tutti,
Io ho trovato in rete uno script per fare una specie di distruzione al click sopra un'immagine, è un effetto abbastanza stupido ma volevo iniziare a capire come funziona l'html5.
Ora il mio problema è come fare per dirgli di mantere le dimensioni dell'immagine fissa e mettere il canvas al 100% in maniera da mandare i pezzi dell'immagine a occupare tutto lo schermo e non solo un rettangolo al centro.
Il codice è il seguente:
Javascript:
HTML:codice HTML:var sourcecanvas; // videovar copy;var copycanvas;var draw; var cw=450;var ch=401; var TILE_WIDTH = 5;var TILE_HEIGHT = 5; var TILE_CENTER_WIDTH = 16;var TILE_CENTER_HEIGHT = 12;var SOURCERECT = {x:0, y:0, width:0, height:0};var PAINTRECT = {x:0, y:0, width:cw, height:ch}; var constRange = 180;var delay = 10;var count = 0; function loadCanvas() { if(sourcecanvas.getContext) { var ctx = sourcecanvas.getContext('2d'); var img = new Image(); // Create new Image object img.onload = function(){ var siw=cw/img.width; var sih=ch/img.height; var iw=siw*img.width; var ih=sih*img.height; ctx.drawImage(img,(0.5*cw)-(0.5*iw),(0.5*ch)-(0.5*ih)); //var siw=cw/img.width; //var sih=ch/img.height; //alert('siw='+siw); //ctx.scale(siw,sih); }; // Set source path var r = Math.ceil(5 * Math.random()); r=3; if (r==0) { img.src = 'http://wapsbttest2.momac.net/html5/logo/godownload.jpg'; } if (r==1) { img.src = 'http://wapsbttest2.momac.net/html5/logo/gosell.jpg'; } if (r==2) { img.src = 'http://wapsbttest2.momac.net/html5/logo/logo_final_2007_rgb_big.jpg'; } if (r==3) { img.src = 'http://wapsbttest2.momac.net/html5/logo/gomedia.jpg'; } if (r==4) { img.src = 'http://wapsbttest2.momac.net/html5/logo/gotv.jpg'; } }} function init(){ sourcecanvas = document.getElementById('sourcecanvas'); copycanvas = document.getElementById('sourcecopy'); copy = copycanvas.getContext('2d'); outputcanvas = document.getElementById('output'); draw = outputcanvas.getContext('2d'); loadCanvas(); setInterval("processFrame()", delay);} function animation(){ if (count>2) { count = 0; } count=count+1;} var RAD = Math.PI/180;var randomJump = false;var tiles = [];var debug = false; function processFrame(){ var debugStr = debugStr + "debug"; // init if(SOURCERECT.width == 0){ SOURCERECT = {x:0,y:0,width:PAINTRECT.width,height:PAINTRECT.height}; //loadCanvas(); // needed in iPhone createTiles(); } copy.drawImage(sourcecanvas, 0, 0); draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height); for(var i=0; i<tiles.length; i++){ var tile = tiles[i]; if(tile.force > 0.0001){ //expand tile.moveX *= tile.force; tile.moveY *= tile.force; tile.moveRotation *= tile.force; tile.currentX += tile.moveX; tile.currentY += tile.moveY; tile.rotation += tile.moveRotation; tile.rotation %= 360; tile.force *= 0.9; if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){ tile.moveX *= -1; } if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){ tile.moveY *= -1; } }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){ //contract var diffx = (tile.originX-tile.currentX)*0.2; var diffy = (tile.originY-tile.currentY)*0.2; var diffRot = (0-tile.rotation)*0.2; if(Math.abs(diffx) < 0.5){ tile.currentX = tile.originX; }else{ tile.currentX += diffx; } if(Math.abs(diffy) < 0.5){ tile.currentY = tile.originY; }else{ tile.currentY += diffy; } if(Math.abs(diffRot) < 0.5){ tile.rotation = 0; }else{ tile.rotation += diffRot; } }else{ tile.force = 0; } draw.save(); draw.translate(tile.currentX, tile.currentY); draw.rotate(tile.rotation*RAD); draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT); draw.restore(); } if(debug){ //debug = false; document.getElementById('trace').innerHTML = debugStr; }} function Tile(){ this.originX = 0; this.originY = 0; this.currentX = 0; this.currentY = 0; this.rotation = 0; this.force = 0; this.z = 0; this.moveX= 0; this.moveY= 0; this.moveRotation = 0; this.videoX = 0; this.videoY = 0;} function createTiles(){ var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2; var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2; var y=0; while(y < SOURCERECT.height){ var x=0; while(x < SOURCERECT.width){ var tile = new Tile(); tile.videoX = x; tile.videoY = y; tile.originX = offsetX+x; tile.originY = offsetY+y; tile.currentX = tile.originX; tile.currentY = tile.originY; tiles.push(tile); x+=TILE_WIDTH; } y+=TILE_HEIGHT; }} function explode(x, y){ for(var i=0; i<tiles.length; i++){ var tile = tiles[i]; var xdiff = tile.currentX-x; var ydiff = tile.currentY-y; var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff); var randRange = constRange+(Math.random()*30); var range = randRange-dist; var force = 3*(range/randRange); if(force > tile.force){ tile.force = force; var radians = Math.atan2(ydiff, xdiff); tile.moveX = Math.cos(radians); tile.moveY = Math.sin(radians); tile.moveRotation = 0.5-Math.random(); } } tiles.sort(zindexSort); processFrame();} function zindexSort(a, b){ return (a.force-b.force);} function dropBomb(evt, obj){ var posx = 0; var posy = 0; var e = evt || window.event; if (e.pageX || e.pageY){ posx = e.pageX; posy = e.pageY; }else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } var canvasX = posx-obj.offsetLeft; var canvasY = posy-obj.offsetTop; explode(canvasX, canvasY); animation();}
codice HTML:<div style="display:none"> <canvas id="sourcecanvas" width="500" height="450"></canvas> <canvas id="sourcecopy" width="500" height="450"></canvas> </div> <canvas id="output" width="450" height="401" onmousedown="dropBomb(event, this)" style="cursor: pointer;"></canvas>
Rispondi quotando