想要将这样的地图图像转换为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>