如何在移動時添加拼圖部分陰影

Question

我做了一個像拼圖遊戲一樣的遊戲，當我移動或滾動我的拼圖部件時，我遇到了問題，然後部件陰影與它一起出現，如下圖所示。
我試過canvas.clearRect(0,0,this.canvas.width,this.canvas.height);但它不能幫助我。

我的js代碼here和我想要this鼠標移動或拖動時間。

Answer 1

如何重用陰影效果效率

添加陰影的是帆布做的最昂貴的任務之一。所以你可能不想重新計算每個鼠標移動的陰影。相反，您可以在應用程序的開始處爲每個圖形創建一個單獨的陰影。然後，在鼠標移動過程中重新使用陰影，方法是首先繪製陰影，然後在陰影頂部繪製圖像。

假設你有塊拼圖和許多（但不是全部）有這個slot-tab-slot-tab形狀：

......還有......

然後您可以創建一個單一的陰影圖像，將適合在任何的slot-tab-slot-tab形狀，得到形狀的影子：

所以，如果你先畫出陰影再畫上陰影的頂部任何slot-tab-slot-tab一塊你有一個影子服務的任何一塊與形狀：

......然後......

這裏的註釋代碼和演示：

// canvas vars 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
// jigsaw vars 
 
var pieces=[]; 
 
var shadows=[]; 
 
var blurSize=10; 
 
// jigsaw piece#1 
 
var piece1=new Image(); 
 
piece1.onload=start; 
 
piece1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Piece1.png"; 
 
// jigsaw piece#2 
 
var piece2=new Image(); 
 
piece2.onload=start; 
 
piece2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Piece2.png"; 
 
var imgcount=2; 
 
// start() after all images are fully loaded 
 
function start(){ 
 
    if(--imgcount>0){return;} 
 

 
    // create piece definitions 
 
    pieces.push({img:piece1,x:25,y:75,w:piece1.width,h:piece1.height,shadowIndex:0,showShadow:false}); 
 
    pieces.push({img:piece2,x:300,y:75,w:piece2.width,h:piece2.height,shadowIndex:0,showShadow:false}); 
 
    
 
    // make one shadow that fits all pieces with this outline 
 
    shadows.push(makeShadowUnderlay(piece1,blurSize)); 
 
    
 
    // draw the pieces 
 
    drawAllPieces(); 
 
    
 
    // listen for mouse events 
 
    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
    $("#canvas").mouseup(function(e){handleMouseUpOut(e);}); 
 
    $("#canvas").mouseout(function(e){handleMouseUpOut(e);}); 
 
} 
 

 
function drawAllPieces(){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    for(var i=0;i<pieces.length;i++){ 
 
     drawPiece(i); 
 
    } 
 
} 
 

 
function drawPiece(pieceIndex){ 
 
    // cache the piece 
 
    var piece=pieces[pieceIndex]; 
 
    // draw the shadow, if desired 
 
    if(piece.showShadow){ 
 
     var shadow=shadows[piece.shadowIndex] 
 
     ctx.drawImage(shadow,piece.x-blurSize,piece.y-blurSize); 
 
    } 
 
    // draw the piece 
 
    ctx.drawImage(piece.img,piece.x,piece.y); 
 
} 
 

 

 
function makeShadowUnderlay(img,blurSize){ 
 
    // create a new canvas containing the shadowed 
 
    // outline of the img 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    c.width=img.width+blurSize*2; 
 
    c.height=img.height+blurSize*2; 
 
    cctx.shadowColor='black'; 
 
    cctx.shadowBlur=blurSize; 
 
    cctx.shadowOffsetX=500; 
 
    cctx.drawImage(img,blurSize-500,blurSize); 
 
    return(c); 
 
} 
 

 
function handleMouseDown(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // get mouse postion 
 
    var mx=parseInt(e.clientX-offsetX); 
 
    var my=parseInt(e.clientY-offsetY); 
 
    // set showShadow flag for any piece(s) under mouse 
 
    for(var i=0;i<pieces.length;i++){ 
 
     var p=pieces[i]; 
 
     p.showShadow=false; 
 
     if(mx>p.x && mx<p.x+p.w && my>p.y && my<p.y+p.h){ 
 
      p.showShadow=true; 
 
     } 
 
    } 
 
    // redraw all pieces 
 
    drawAllPieces(); 
 
} 
 
// 
 
function handleMouseUpOut(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // clear all shadow flags 
 
    for(var i=0;i<pieces.length;i++){ pieces[i].showShadow=false; } 
 
    // redraw all pieces 
 
    drawAllPieces();  
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Mousedown on piece to shadow it using a reusable(!) shadow image</h4> 
 
<canvas id="canvas" width=600 height=300></canvas>