canvas-html5でイメージを描画して終了関数に置き換える方法

Question

私は描画イメージに問題があり、2つの関数で塗りつぶしスタイルに置き換えます。 このコードはキャンバスを使用した単純なドールルジャンパーゲームです。私はfillstylesの部分で画像を使用するようにこのスクリプトを修正します。 2機能使用塗りつぶしスタイル：

クリア機能：

var clear = function(){ 
    ctx.fillStyle = '#000000'; 
    ctx.clearRect(0, 0, width, height); 
    ctx.beginPath(); 
    ctx.rect(0, 0, width, height); 
    ctx.closePath(); 
    ctx.fill(); 
} 

DrawCircles機能：

var howManyCircles = 10, circles = []; 

for (var i = 0; i < howManyCircles; i++) 
    circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random()/2]); 

var DrawCircles = function(){ 
    for (var i = 0; i < howManyCircles; i++) { 
     ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')'; 
     ctx.beginPath(); 
     ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    } 
}; 

フルスクリプト：

var width = 320, 
    height = 500, 
    gLoop, 
    points = 0, 
    state = true, 
    c = document.getElementById('c'), 
    ctx = c.getContext('2d'); 

    c.width = width; 
    c.height = height; 


var clear = function(){ 
    ctx.fillStyle = '#d0e7f9'; 
    ctx.clearRect(0, 0, width, height); 
    ctx.beginPath(); 
    ctx.rect(0, 0, width, height); 
    ctx.closePath(); 
    ctx.fill(); 
} 

var howManyCircles = 10, circles = []; 

for (var i = 0; i < howManyCircles; i++) 
    circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random()/2]); 

var DrawCircles = function(){ 
    for (var i = 0; i < howManyCircles; i++) { 
     ctx.fillStyle = 'rgba(255, 255, 255, ' + circles[i][3] + ')'; 
     ctx.beginPath(); 
     ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    } 
}; 

var MoveCircles = function(e){ 
    for (var i = 0; i < howManyCircles; i++) { 
     if (circles[i][1] - circles[i][2] > height) { 
      circles[i][0] = Math.random() * width; 
      circles[i][2] = Math.random() * 100; 
      circles[i][1] = 0 - circles[i][2]; 
      circles[i][3] = Math.random()/2; 
     } 
     else { 
      circles[i][1] += e; 
     } 
    } 
}; 

var player = new (function(){ 
    var that = this; 
    that.image = new Image(); 

    that.image.src = "angel.png" 
    that.width = 65; 
    that.height = 95; 
    that.frames = 1; 
    that.actualFrame = 0; 
    that.X = 0; 
    that.Y = 0; 

    that.isJumping = false; 
    that.isFalling = false; 
    that.jumpSpeed = 0; 
    that.fallSpeed = 0; 

    that.jump = function() { 
     if (!that.isJumping && !that.isFalling) { 
      that.fallSpeed = 0; 
      that.isJumping = true; 
      that.jumpSpeed = 17; 
     } 
    } 

    that.checkJump = function() { 
     //a lot of changes here 

     if (that.Y > height*0.4) { 
      that.setPosition(that.X, that.Y - that.jumpSpeed);  
     } 
     else { 
      if (that.jumpSpeed > 10) 
       points++; 
      // if player is in mid of the gamescreen 
      // dont move player up, move obstacles down instead 
      MoveCircles(that.jumpSpeed * 0.5); 

      platforms.forEach(function(platform, ind){ 
       platform.y += that.jumpSpeed; 

       if (platform.y > height) { 
        var type = ~~(Math.random() * 5); 
        if (type == 0) 
         type = 1; 
        else 
         type = 0; 

        platforms[ind] = new Platform(Math.random() * (width - platformWidth), platform.y - height, type); 
       } 
      }); 
     } 


     that.jumpSpeed--; 
     if (that.jumpSpeed == 0) { 
      that.isJumping = false; 
      that.isFalling = true; 
      that.fallSpeed = 1; 
     } 

    } 

    that.fallStop = function(){ 
     that.isFalling = false; 
     that.fallSpeed = 0; 
     that.jump();  
    } 

    that.checkFall = function(){ 
     if (that.Y < height - that.height) { 
      that.setPosition(that.X, that.Y + that.fallSpeed); 
      that.fallSpeed++; 
     } else { 
      if (points == 0) 
       that.fallStop(); 
      else 
       GameOver(); 
     } 
    } 

    that.moveLeft = function(){ 
     if (that.X > 0) { 
      that.setPosition(that.X - 5, that.Y); 
     } 
    } 

    that.moveRight = function(){ 
     if (that.X + that.width < width) { 
      that.setPosition(that.X + 5, that.Y); 
     } 
    } 


    that.setPosition = function(x, y){ 
     that.X = x; 
     that.Y = y; 
    } 

    that.interval = 0; 
    that.draw = function(){ 
     try { 
      ctx.drawImage(that.image, 0, that.height * that.actualFrame, that.width, that.height, that.X, that.Y, that.width, that.height); 
     } 
     catch (e) { 
     }; 

     if (that.interval == 4) { 
      if (that.actualFrame == that.frames) { 
       that.actualFrame = 0; 
      } 
      else { 
       that.actualFrame++; 
      } 
      that.interval = 0; 
     } 
     that.interval++;   
    } 
})(); 


player.setPosition(~~((width-player.width)/2), height - player.height); 
player.jump(); 

document.onmousemove = function(e){ 
    if (player.X + c.offsetLeft > e.pageX) { 
     player.moveLeft(); 
    } else if (player.X + c.offsetLeft < e.pageX) { 
     player.moveRight(); 
    } 

} 
    var nrOfPlatforms = 7, 
     platforms = [], 
     platformWidth = 70, 
     platformHeight = 20; 

    var Platform = function(x, y, type){ 
     var that=this; 

     that.firstColor = '#FF8C00'; 
     that.secondColor = '#EEEE00'; 
     that.onCollide = function(){ 
      player.fallStop(); 
     }; 

     if (type === 1) { 
      that.firstColor = '#AADD00'; 
      that.secondColor = '#698B22'; 
      that.onCollide = function(){ 
       player.fallStop(); 
       player.jumpSpeed = 50; 
      }; 
     } 



     that.x = ~~ x; 
     that.y = y; 
     that.type = type; 

     //NEW IN PART 5 
     that.isMoving = ~~(Math.random() * 2); 
     that.direction= ~~(Math.random() * 2) ? -1 : 1; 

     that.draw = function(){ 
      ctx.fillStyle = 'rgba(255, 255, 255, 1)'; 
      var gradient = ctx.createRadialGradient(that.x + (platformWidth/2), that.y + (platformHeight/2), 5, that.x + (platformWidth/2), that.y + (platformHeight/2), 45); 
      gradient.addColorStop(0, that.firstColor); 
      gradient.addColorStop(1, that.secondColor); 
      ctx.fillStyle = gradient; 
      ctx.fillRect(that.x, that.y, platformWidth, platformHeight); 
     }; 

     return that; 
    }; 

    var generatePlatforms = function(){ 
     var position = 0, type; 
     for (var i = 0; i < nrOfPlatforms; i++) { 
      type = ~~(Math.random()*5); 
      if (type == 0) 
       type = 1; 
      else 
       type = 0; 
      platforms[i] = new Platform(Math.random() * (width - platformWidth), position, type); 
      if (position < height - platformHeight) 
       position += ~~(height/nrOfPlatforms); 
     } 
    }(); 

    var checkCollision = function(){ 
    platforms.forEach(function(e, ind){ 
     if (
     (player.isFalling) && 
     (player.X < e.x + platformWidth) && 
     (player.X + player.width > e.x) && 
     (player.Y + player.height > e.y) && 
     (player.Y + player.height < e.y + platformHeight) 
     ) { 
      e.onCollide(); 
     } 
    }) 
    } 

var GameLoop = function(){ 
    clear(); 
    //MoveCircles(5); 
    DrawCircles(); 

    if (player.isJumping) player.checkJump(); 
    if (player.isFalling) player.checkFall(); 

    player.draw(); 

    platforms.forEach(function(platform, index){ 
     if (platform.isMoving) { 
      if (platform.x < 0) { 
       platform.direction = 1; 
      } else if (platform.x > width - platformWidth) { 
       platform.direction = -1; 
      } 
       platform.x += platform.direction * (index/2) * ~~(points/100); 
      } 
     platform.draw(); 
    }); 

    checkCollision(); 

    ctx.fillStyle = "Black"; 
    ctx.fillText("POINTS:" + points, 10, height-10); 

    if (state) 
     gLoop = setTimeout(GameLoop, 1000/50); 
} 

    var GameOver = function(){ 
     state = false; 
     clearTimeout(gLoop); 
     setTimeout(function(){ 
      clear(); 

      ctx.fillStyle = "Black"; 
      ctx.font = "10pt Arial"; 
      ctx.fillText("GAME OVER", width/2 - 60, height/2 - 50); 
      ctx.fillText("YOUR RESULT:" + points, width/2 - 60, height/2 - 30); 
     }, 100); 

    }; 

GameLoop(); 

誰も私を助けることができますか？

おかげ

Answer 1

あなたはcontext.drawImageのスケーリングバージョンを使用して背景画像に完全にキャンバスを埋めることができます。以下のclearのバージョンは、使用可能なキャンバス領域を完全に埋めるように画像を拡大または縮小します。

function clear(img){ 
    var scale=(Math.min((img.width/canvas.width),(img.height/canvas.height))); 
    ctx.drawImage(bk,0,0,img.width*scale,img.height*scale); 
} 

合成を使用して画像を円内でクリップすることができます。以下のコードは、指定された半径を持つ円の中に描画された指定されたイメージを含む新しいキャンバスを作成します。これは、2つの段階でこれを実現：

• は、新しいキャンバスを作成し、drawImageにその円内の画像を合成し、指定半径
• 使用source-atopで塗りつぶされた円を描きます。合成のため、画像は既存サークルの外側に描画されません。

円内にクリップされた画像を作成します。

function makeCircledImage(r,img){ 
    var c=document.createElement('canvas'); 
    var cctx=c.getContext('2d'); 
    c.width=c.height=r*2; 
    cctx.beginPath(); 
    cctx.arc(r,r,r,0,Math.PI*2); 
    cctx.fill(); 
    cctx.globalCompositeOperation='source-atop'; 
    cctx.drawImage(img,r/2-img.width/2,r/2-img.height/2); 
    return(c); 
} 

ここではサンプルコードやデモです：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var bk=new Image(); 
 
bk.onload=start; 
 
bk.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg"; 
 
var marble=new Image(); 
 
marble.onload=start; 
 
marble.src='https://dl.dropboxusercontent.com/u/139992952/stack1/marble.jpg'; 
 
var imgCount=2; 
 
function start(){ 
 
    if(--imgCount>0){return;} 
 
    clear(bk); 
 
    var marbleCircle=makeCircledImage(20,marble); 
 
    for(var i=0;i<5;i++){ 
 
    ctx.drawImage(marbleCircle,i*50+25,100) 
 
    } 
 
} 
 

 
function clear(img){ 
 
    var scale=(Math.min((img.width/canvas.width),(img.height/canvas.height))); 
 
    ctx.drawImage(bk,0,0,img.width*scale,img.height*scale); 
 
} 
 

 
function makeCircledImage(r,img){ 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    c.width=c.height=r*2; 
 
    cctx.beginPath(); 
 
    cctx.arc(r,r,r,0,Math.PI*2); 
 
    cctx.fill(); 
 
    cctx.globalCompositeOperation='source-atop'; 
 
    cctx.drawImage(img,r/2-img.width/2,r/2-img.height/2); 
 
    return(c); 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<h4>Water background with circular marble canvas-images.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>