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自定义形状

回答

相关问题