无法在html5画布上绘制超过1个形状的图形
[英]unable to draw more then 1 shape on html5 canvas
问题描述
在这里，我有一个程序可以在画布上绘制多边形。 问题是它只能绘制1个多边形。我似乎无法解决问题，因为为什么我只能绘制1个多边形。 完成我的第一个形状的绘制后，光标移到画布上，没有任何反应。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="board">
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
<br /><br />
<input type="button" value="Save" onclick="save();" />
<input type="button" value="reset" onclick="reset(); " />
Couleur : <select id="color" onchange="changeColor(this.options[this.selectedIndex].value);">
<option value="red" selected="selected">Red</option>
<option value="blue" selected="selected">Blue</option>
<option value="green" selected="selected">green</option>
<option value="black" selected="selected">black</option>
<option value="yellow" selected="selected">yellow</option>
</select>
</p>
</div><!-- END board -->
</body>
</html>
<style>
body {
margin: 0;
}
#board {
margin: 0 auto;
width: 500px;
}
#myCanvas {
border: 3px dotted #000;
}
</style>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
var END_CLICK_RADIUS = 5;
//the max number of points of your poygon
var MAX_POINTS = 8;
var mouseX = 0;
var mouseY = 0;
var isStarted = false;
var points = null;
var canvas = null;
var ctx = null;
window.onload = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
changeColor("red");
canvas.addEventListener("click", function(e) {
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
if(isStarted) {
//drawing the next line, and closing the polygon if needed
if(Math.abs(x - points[0].x) < END_CLICK_RADIUS && Math.abs(y - points[0].y) < END_CLICK_RADIUS) {
isStarted = false;
} else {
points[points.length] = new Point(x, y);
if(points.length >= MAX_POINTS) {
isStarted = false;
}
}
} else if(points == null) {
//opening the polygon
points = new Array();
points[0] = new Point(x, y);
isStarted = true;
}
}, false);
//we just save the location of the mouse
canvas.addEventListener("mousemove", function(e) {
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
}, false);
//refresh time
setInterval("draw();", 100);
}
//changes the color of the draw
function changeColor(color) {
ctx.strokeStyle = color;
}
//object representing a point
function Point(x, y) {
this.x = x;
this.y = y;
}
//resets the application
function reset() {
isStarted = false;
points = null;
}
//alerts the point list
function save() {
if(points == null) {
alert("nothing to save");
} else {
var s = "";
for(var a in points) {
//inversing y axis by (canvas.height - points[a].y)
s += "(" + points[a].x + "," + (canvas.height - points[a].y) + ")\n";
}
alert(s);
}
}
//draws the current chape
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
if(points != null && points.length > 0) {
ctx.moveTo(points[0].x, points[0].y);
for(i = 1 ; i < points.length ; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
if(isStarted) {
ctx.lineTo(mouseX, mouseY);
} else {
ctx.lineTo(points[0].x, points[0].y);
}
}
ctx.stroke();
}
</script>
1 个解决方案
解决方案1
1 已采纳 2013-12-06 17:34:41
考虑数据存储和代码流。
形状是点到点的点的阵列。 在100毫秒的间隔后，将绘制到目前为止的形状。 通过清除画布并绘制阵列中的所有点来绘制形状，因此唯一可以绘制的形状是点数组中存储的形状。
打开新多边形的条件是
isStarted为假
点==空
多边形完成但点未设置为null时，isStarted设置为false。
PROBLEM设置点为null会擦除掉刚刚完成的形状。
解决方案：形状的数组。
另外，您无需按设置的时间间隔绘制，只需单击鼠标即可绘制。
请尝试以下建议。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="board">
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
<br /><br />
<input type="button" value="Save" onclick="save();" />
<input type="button" value="reset" onclick="reset(); " />
Couleur : <select id="color" onchange="changeColor(this.options[this.selectedIndex].value);">
<option value="red" selected="selected">Red</option>
<option value="blue" selected="selected">Blue</option>
<option value="green" selected="selected">green</option>
<option value="black" selected="selected">black</option>
<option value="yellow" selected="selected">yellow</option>
</select>
</p>
</div><!-- END board -->
</body>
</html>
<style>
body {
margin: 0;
}
#board {
margin: 0 auto;
width: 500px;
}
#myCanvas {
border: 3px dotted #000;
}
</style>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
var END_CLICK_RADIUS = 5;
//the max number of points of your poygon
var MAX_POINTS = 8;
var mouseX = 0;
var mouseY = 0;
var isStarted = false;
var points = null;
var shapes=new Array();
var canvas = null;
var ctx = null;
window.onload = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
changeColor("red");
canvas.addEventListener("click", function(e) {
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
if(isStarted) {
//drawing the next line, and closing the polygon if needed
if(Math.abs(x - points[0].x) < END_CLICK_RADIUS && Math.abs(y - points[0].y) < END_CLICK_RADIUS) {
isStarted = false;
points[points.length] = new Point(points[0].x, points[0].y); //stores closing point
shapes.push(points); //pushes the array points into the array shapes
} else {
points[points.length] = new Point(x, y);
if(points.length >= MAX_POINTS) {
isStarted = false;
points[points.length] = new Point(points[0].x, points[0].y); //stores closing point
shapes.push(points);
}
}
} else {
//opening the polygon
points = new Array();
points[0] = new Point(x, y);
isStarted = true;
}
draw();
}, false);
//we just save the location of the mouse
canvas.addEventListener("mousemove", function(e) {
mouseX = e.clientX - canvas.offsetLeft;
mouseY = e.clientY - canvas.offsetTop;
}, false);
//refresh time
setInterval("draw();", 100);
}
//changes the color of the draw - CURRENTLY SAME FOR ALL SHAPES
function changeColor(color) {
ctx.strokeStyle = color;
}
//object representing a point
function Point(x, y) {
this.x = x;
this.y = y;
}
//resets the application
function reset() {
isStarted = false;
points = null;
}
//alerts the point list - NOTE UPDATE THIS FUNCTION TO SAVE ALL SHAPES
function save() {
if(points == null) {
alert("nothing to save");
} else {
var s = "";
for(var a in points) {
//inversing y axis by (canvas.height - points[a].y)
s += "(" + points[a].x + "," + (canvas.height - points[a].y) + ")\n";
}
alert(s);
}
}
//draws the current shape
function draw() {
var prevpoints;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
//draws polygon under construction
if(points != null && points.length > 0) {
ctx.moveTo(points[0].x, points[0].y);
for(i = 1 ; i < points.length ; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
if(isStarted) {
ctx.lineTo(mouseX, mouseY);
} else {
ctx.lineTo(points[0].x, points[0].y);
}
}
// draws previous shapes in any exist
for (var j = 0; j<shapes.length; j++) {
prevpoints=shapes[j];
ctx.moveTo(prevpoints[0].x, prevpoints[0].y);
for(i = 1 ; i < prevpoints.length ; i++) {
ctx.lineTo(prevpoints[i].x, prevpoints[i].y);
}
}
ctx.stroke();
}
</script>
注意我没有对保存功能进行任何更改，您需要考虑到有几种形状
如何在 HTML5 Canvas 中绘制云形状？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.