如何使用JavaScript在画布上绘制多个矩形 [英] How do I draw multiple rectangles on canvas using JavaScript
本文介绍了如何使用JavaScript在画布上绘制多个矩形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I am working on a project where I want to draw a rectangle when I double click on a canvas. I want to be able to double click the first time and a rectangle is drawn and when the I double click again on another place on the canvas for another rectangle to be drawn. Below is my JavaScript funtion that only draws one rectangle no matter how many times I double click on separate occasions. Please help.
function handleMouseDoubleClick(e) {
alert('This will create shapes on the canvas');
// create the rectangle
var images = [];
images.push({
x: 200,
y: 150,
width: 25,
height: 25,
color: "gold"
});
// draw rectangle
context.globalAlpha = 1.00;
for (var i = 0; i < images.length; i++) {
var img = images[i];
context.beginPath();
context.rect(img.x + panX, img.y + panY, img.width, img.height);
context.fillStyle = img.color;
context.fill();
context.stroke();
}
}
推荐答案
考虑鼠标位置怎么样？
看看这个漂亮的教程： http://simonsarris.com/ blog / 510-making-html5-canvas-useful [ ^ ]，它是关于您尝试学习的内容。
What about taking into account the mouse position also?
Take a look on this nice tutorial: http://simonsarris.com/blog/510-making-html5-canvas-useful[^], it is about what you try to learn.
x和y坐标是固定的，因此它一直在同一个地方绘制。
研究这个示例代码并进行调整：
The x and y coordinates are fixed, so it kept drawing on the same place.
Study this sample code and adapt:
<!DOCTYPE HTML>
<html>
<head>
<title>Coding Canvas</title>
</head>
<body>
<canvas id="mycanvas" width="350" height="200" style="border:1px solid #000000; margin:20px;">
Oops! This browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
function drawRec(x, y){
context.beginPath();
context.rect(x, y, 80, 50);
context.stroke();
}
// get x, y coordinates of double clicking
function getPosition(e) {
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
// add event listener on double click to canvas
canvas.addEventListener('dblclick', function(e) {
var position = getPosition(e);
drawRec(position.x, position.y);
});
</script>
</body>
</html>
了解更多： HTML5初学者指南& CSS3 - 编码画布 [ ^ ]
我假设您的代码正在运行，panX，panY和context正在定义其他地方。
通过查看代码，每次在画布上双击时，矩形就会被重新绘制。
我假设panX和panY正在填充并且应该以某种方式表示鼠标位置，这似乎不适用于您的示例。
我已修改代码以使其使用jQuery工作。
I assume your code is working and panX, panY and context are being define some other place.
From looking at the code, every time there is a double click on the canvas the rectangle is being re-drawn over itself.
I assume the panX and panY are being populated and should represent the mouse position somehow, which does not appear to be working in your example.
I have modified the code to get it to work using jQuery.
#canvas {border:solid 1px green;}
<canvas id="canvas" width="300" height="300"></canvas>
这篇关于如何使用JavaScript在画布上绘制多个矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
