Хотите преобразовать изображение карты, подобное этому, в графику 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>