html5 canvas自定義形狀

我在HTML中製作風險類遊戲時遇到問題。我現在使用的解決方案是給每個國家「立場：絕對的」。然後將其放在它所屬的位置，但是當用戶想要鼠標懸停或點擊所需的國家時會發生問題。國家被表示爲塊，並且具有一個國家形狀的背景圖像，所以當你看到它時，你不會看到它實際上是一個塊。html5 canvas自定義形狀

你能不能給我任何實例或一個很好的資源網站，我可以實現以下目標：

這是怎麼了當前的模樣：http://s24.postimg.org/402tvyovp/image.png

這是我希望它看起來和行爲像：http://s24.postimg.org/5cpkuysmt/image.png

所以元件具有一個國家，而不是一個塊中，當用戶將鼠標在該形狀（而不是塊周邊的話），這意味着的形狀，腳本將執行一些功能。

來源

2013-04-07 Nikola R.

您的國家形狀是由您使用畫布路徑繪製的，還是僅僅是一個圖像？ – markE 2013-04-07 18:01:16

這些模型是在Photoshop中繪製的，所以它們是圖像。 – 2013-04-07 19:56:15

下面是如何確定哪些習俗的國家形態被點擊畫布上

首先，用photoshop來改變每個國家在地圖上爲不同的獨特的顏色（彩色編碼圖）

（別擔心，用戶不需要看到這個顏色編碼的地圖）。

然後，當用戶點擊畫布上，得到在clickpoint顏色和與貴國的顏色像這樣的比較：

function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     var color=getPixelRGB(mouseX,mouseY); 
     if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }   
     if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }   
     if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }   
    } 

    function isColorMatch(color,red,green,blue){ 
     return(color.red==red && color.green==green && color.blue==blue); 
    } 

    function getPixelRGB(x, y) { 
     var pxData = ctx.getImageData(x,y,1,1); 
     var R = pxData.data[0]; 
     var G = pxData.data[1]; 
     var B = pxData.data[2]; 
     return({red:R, green:G, blue:B});  
    }

您可能不希望顯示用戶的彩色編碼圖。如果沒有，您可以在與屏幕畫布相同的屏幕外畫布上創建顏色編碼的地圖 - 除了顏色編碼。當用戶點擊屏幕畫布時，只需在顏色編碼的地圖上檢查該像素位置即可。您可以獲得屏幕上的美容+屏幕外功能。

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/rmn5D/

請注意，此琴確實是因爲跨站點瀏覽器的安全警告，你將要替換自己的顏色編碼地圖的用戶不準確的地圖。

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

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

    var img=new Image(); 
    img.onload=function(){ 
     canvas.width=img.width; 
     canvas.height=img.height; 
     ctx.drawImage(img,0,0); 
    } 
    img.src="yourColorCodedMap.png"; 


    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     var color=getPixelRGB(mouseX,mouseY); 
     if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }   
     if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }   
     if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }   
    } 

    function isColorMatch(color,red,green,blue){ 
     return(color.red==red && color.green==green && color.blue==blue); 
    } 

    function getPixelRGB(x, y) { 
     var pxData = ctx.getImageData(x,y,1,1); 
     var R = pxData.data[0]; 
     var G = pxData.data[1]; 
     var B = pxData.data[2]; 
     return({red:R, green:G, blue:B});  
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Click on a map location to get country</p> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2013-04-07 22:46:55 markE

這是一個很棒的答案！我會接受它，只是告訴我，即使形狀不是矩形而是定製形狀（可以說美國大陸的形狀），這項工作嗎？ – 2013-04-08 00:40:39

是的，任何形狀，他們甚至不需要連接....如果你願意，你可以在印度尼西亞所有的17000個獨立的島嶼！ – markE 2013-04-08 00:58:25

html5 canvas自定義形狀

回答

相關問題