我正在制作一个带有要在网格上使用的矩形选择工具的 HTML5 网格。它进行得非常好，但当我尝试使用矩形选择工具时，我的网格消失了。我希望网格保留在 Canvas 上。
到目前为止，这是我的代码(如果你测试一下，你可能会更好地理解我的问题)，
<!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>
谢谢，如果您需要更多解释，请告诉我。
最佳答案
您正在您的工具绘制函数中调用 context.clearRect(0, 0, canvas.width, canvas.height); 以清除整个 Canvas 。
您必须在调用 clearRect 之后添加对 renderGrid 的调用，以便重新绘制网格或稍微更改结构以具有调用的绘制函数clearRect renderGrid 和您拥有的任何工具。然后在您的监听器中将该工具添加到要绘制的工具列表中并调用绘制函数。
关于javascript - HTML5 删除我的绘图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17253122/