Question

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

Answer 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>

如何使用Html5画布在Triangle内找到mousepoint

1 个答案: