このようなマップ画像をJavascriptやHTML5グラフィックスに変換したいですか？

Question

thisのマップを同じ形や色で、少し変形してグラフィックスを描いて描きたいだけです。

Answer 1

非常に簡単です！

だけdrawImage()例えばmoveTo()とlineTo()を使用します（私の隣人は、ボブは推奨していません！）キャンバスの文脈に - ライブラリのための必要性：

var ctx = c.getContext("2d"); 
 
var img = new Image; 
 
img.onload = yeehaw; 
 
img.src = "https://i.stack.imgur.com/cnNd6.jpg"; 
 

 
function yeehaw() { 
 

 
    var r = Math.random; 
 
    
 
    // apply some transformation 
 
    ctx.setTransform(r() * 1.5 + 1, r(), r(), r() * 1.5 + 1, -r() * 50, -r() * 50); 
 
    
 
    // draw image 
 
    ctx.drawImage(this, 0, 0, c.width>>1, c.height>>1); 
 
    
 
    // add a little graphics 
 
    for(var i = 0; i < 50; i++) { 
 
    ctx.setTransform(r() * 1.5 + 1, r(), r(), r() * 1.5 + 1, -r() * 50, -r() * 50); 
 
    ctx.moveTo(0, 0); ctx.lineTo(c.width, c.height); 
 
    } 
 
    ctx.strokeStyle = "#f0f"; 
 
    ctx.stroke(); 
 
    
 
    // DONE! 
 
                           var img = new Image; 
 
                           img.onload = function() {ctx.setTransform(1,0,0,1,0,0);ctx.drawImage(this, 50,0);document.querySelector("audio").play()}; 
 
                            setTimeout(function(){img.src = "//i.stack.imgur.com/W9BHW.png"}, 1500); 
 
}

<canvas id=c width=600 height=200></canvas>             <audio src="http://soundbible.com/mp3/Blop-Mark_DiAngelo-79054334.mp3" preload=auto>