如何使html中的canvas元素可點擊？

Question

我正在設計一個有很多數學數字的網頁。例如菱形，正方形，矩形，三角形......

我想要實現的是，當我點擊任何一個數字時，它應該顯示一個msg / info類的東西。

我只有一個畫布ID，其中有很多數字，我如何使它們可點擊以便我可以顯示每個圖形所需的信息

Answer 1

以下是如何使用原生html畫布讓用戶收到有關他們點擊的形狀的消息：

對於每個形狀，將它們的角點放在javascript對象中
將所有這些形狀對象放在一個數組中
聽mousedown事件
在mousedown中使用context.isPointInPath檢查鼠標是否在每個形狀內
如果鼠標位於對象內，則顯示有關該形狀的消息

演示： http ： //jsfiddle.net/m1erickson/wPMk5/

示例代碼：

<!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(){

    // canvas variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // set styles
    ctx.fillStyle="skyblue";
    ctx.strokeStyle="lightgray";
    ctx.lineWidth=2;

    // create a triangle and parallelogram object

    var triangle={
        points:[{x:25,y:100},{x:50,y:50},{x:75,y:100}],
        message:"I am a triangle"
    }

    var parallelogram={
        points:[{x:150,y:50},{x:250,y:50},{x:200,y:100},{x:100,y:100}],
        message:"I am a parallelogram"
    }

    // save the triangle and parallelogram in a shapes[] array

    var shapes=[];
    shapes.push(triangle);
    shapes.push(parallelogram);

    // function to draw (but not fill/stroke) a shape
    // (needed because isPointInPath only tests the last defined path)

    function define(shape){
        var points=shape.points;
        ctx.beginPath();
        ctx.moveTo(points[0].x,points[0].y);
        for(var i=1;i<points.length;i++){
            ctx.lineTo(points[i].x,points[i].y);
        }
    }

    // function to display a shape on the canvas (define + fill + stroke)

    function draw(shape){
        define(shape);
        ctx.fill();
        ctx.stroke();
    }

    // display the triangle and parallelogram
    draw(triangle);
    draw(parallelogram);


    // called when user clicks the mouse

    function handleMouseDown(e){
      e.preventDefault();

      // get the mouse position
      var mouseX=parseInt(e.clientX-offsetX);
      var mouseY=parseInt(e.clientY-offsetY);

      // iterate each shape in the shapes array
      for(var i=0;i<shapes.length;i++){
          var shape=shapes[i];
          // define the current shape
          define(shape);
          // test if the mouse is in the current shape
          if(ctx.isPointInPath(mouseX,mouseY)){
              // if inside, display the shape's message
              alert(shape.message);
          }
      }

    }

    // listen for mousedown events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});

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

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

如果您可以使用SVG，則可以非常輕松地實現此目標。 使用http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html可以繪制相關的形狀，你可以獲得svg代碼。 添加onclick（）事件。

通過此在線工具，您可以創建形狀 在此輸入圖像描述

單擊SVG以獲取代碼

在此輸入圖像描述

碼

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="74" width="150" y="95" x="58" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="35" rx="42" id="svg_2" cy="216" cx="158" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="36" rx="80" id="svg_3" cy="123" cx="342" stroke-width="5" stroke="#000000" fill="#0000ff"/>
  <path id="svg_4" d="m265,257l63,-59l82,47l-22,71l-84,5l-39,-64z" stroke-width="5" stroke="#000000" fill="#0000ff"/>
 </g>
</svg>

您可以向此添加onclick事件。此外，還顯示了添加jquery標題鼠標。

 <rect id="svg_29" class="popup_tool" title="Message you want to popup when mouse over" height="17" width="20" y="224" x="452" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#000000" fill="#ff0000"/>

希望你能得到答案

Answer 3

只需將canvas id包裝在div元素中，之后你可以使用js / jquery隱藏或顯示div，你可以顯示你的消息

Answer 4

要使用canvas元素輕松實現任務，您需要一個像fabricjs這樣的框架

如何使html中的canvas元素可點擊？

問題描述

4 個解決方案

解決方案1
8 2014-03-11 07:01:06

解決方案2
4 2014-03-11 06:20:37

解決方案3
1 已采納 2014-04-15 11:35:34

解決方案4
0 2014-03-11 06:35:14

如何使html中的canvas元素可點擊？

問題描述

4 個解決方案

解決方案1 8 2014-03-11 07:01:06

解決方案2 4 2014-03-11 06:20:37

解決方案3 1 已采納 2014-04-15 11:35:34

解決方案4 0 2014-03-11 06:35:14

解決方案1
8 2014-03-11 07:01:06

解決方案2
4 2014-03-11 06:20:37

解決方案3
1 已采納 2014-04-15 11:35:34

解決方案4
0 2014-03-11 06:35:14