0

我正在使用要在网格上使用的矩形选择工具制作 HTML5 网格。它进展顺利,除非当我尝试使用矩形选择工具时,我的网格消失了。我希望网格留在画布上。

到目前为止,这是我的代码(如果您对此进行测试,您可能会更好地理解我的问题),

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

  <style type='text/css'>
    *
{
    margin: 0; padding: 0;
}

html, body
{
    height: 100%; width: 100%;
}
canvas
{
    display: block;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    function renderGrid(x_size,y_size, color)
    {
        var canvas = $("#myCanvas").get(0);
        var context = canvas.getContext("2d");

        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for(var i = 0; i <= canvas.height; i = i + x_size)
        {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for(var j = 0; j <= canvas.width; j = j + y_size)
        {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

    renderGrid(10,15, "gray");
});

});//]]>  

</script>


</head>
<body>

<div style="height:480px;width:640px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">

<canvas id="myCanvas" width="800" height="800" style="border:0px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

</div>

<script>
// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, context;

  // The active tool instance.
  var tool;
  var tool_default = 'rect';

  function init () {
    // Find the canvas element.
    canvas = document.getElementById('myCanvas');
    if (!canvas) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvas.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    // Get the 2D canvas context.
    context = canvas.getContext('2d');
    if (!context) {
      alert('Error: failed to getContext!');
      return;
    }

    // Activate the default tool.
    if (tools[tool_default]) {
      tool = new tools[tool_default]();
    }

    // Attach the mousedown, mousemove and mouseup event listeners.
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  // The event handler for any changes made to the tool selector.
  function ev_tool_change (ev) {
    if (tools[this.value]) {
      tool = new tools[this.value]();
    }
  }


  // This object holds the implementation of each drawing tool.
  var tools = {};

  // The rectangle tool.
  tools.rect = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      var x = Math.min(ev._x,  tool.x0),
          y = Math.min(ev._y,  tool.y0),
          w = Math.abs(ev._x - tool.x0),
          h = Math.abs(ev._y - tool.y0);

      context.clearRect(0, 0, canvas.width, canvas.height);

      if (!w || !h) {
        return;
      }

      context.strokeRect(x, y, w, h);
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  };

  init();

}, false); }
</script>


</body>
</html>

谢谢,如果您需要更多解释,请告诉我。

4

1 回答 1

1

您正在调用context.clearRect(0, 0, canvas.width, canvas.height);清除整个画布的工具绘制函数。

您必须在调用renderGrid之后添加调用clearRect,以便重新绘制网格或稍微更改结构以具有调用的绘制函数clearRect renderGrid和您拥有的任何工具。然后在您的侦听器中,将该工具添加到要绘制的工具列表中并调用绘图函数。

于 2013-06-22T17:02:07.633 回答