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（）事件。

通过此在线工具，您可以创建形状 enter image description here

单击SVG以获取代码

enter image description here

<强>代码

<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 title 鼠标。

 <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 个答案: