如何使用 Html5 画布在三角形内找到鼠标点答案

【问题标题】：How to find the mousepoint inside the Triangle using Html5 canvas如何使用 Html5 画布在三角形内找到鼠标点
【发布时间】：2014-12-15 18:43:32
【问题描述】：

Html5

<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();

【问题讨论】：

标签： javascript jquery canvas html5-canvas

【解决方案1】：

这里是如何命中测试你的三角形：

你可以定义你的路径（就像你定义了你的三角形一样）
监听 mousemove 事件并确定鼠标位置
使用 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>

【讨论】：