如何使用HTML5畫布找到三角形內的mousepoint

Html5如何使用HTML5畫布找到三角形內的mousepoint

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

context.beginPath(); 
context.moveTo(100, 50); 
context.lineTo(50, 150); 
context.lineTo(150, 150); 
context.lineTo(100, 50); 
context.stroke();

來源

2014-03-19 Sudharsan S

這裏是如何打測試三角形：

如果您的鼠標在裏面你可以定義你的路徑（如已經定義了你的三角形）
監聽鼠標移動事件，並確定鼠標位置
使用context.isPointInPath（mouseX，mouseY的）來測試定義的三角形。

示例代碼和演示：http://jsfiddle.net/m1erickson/XL93U/

<!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 context=canvas.getContext("2d"); 
    var $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    context.beginPath(); 
    context.moveTo(100, 50); 
    context.lineTo(50, 150); 
    context.lineTo(150, 150); 
    context.lineTo(100, 50); 
    context.stroke(); 


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

     var inside=context.isPointInPath(mouseX,mouseY); 
     var text=(inside)?"Inside":"Outside"; 
     $("#results").text(text); 
    } 

    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4 id="results">Move mouse in and out of triangle</h4> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-03-19 04:32:51 markE

由於它的工作原理... –

不客氣！ – markE

如何使用HTML5畫布找到三角形內的mousepoint

回答

相關問題