無法在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.