Question

这里我有一个在画布上绘制多边形的程序。问题是它只绘制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();" />&nbsp;
        <input type="button" value="reset" onclick="reset(); " />&nbsp;
        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>

Answer 1

考虑数据存储和代码流程。

形状是从点击到点击构建的点阵列。在100毫秒的间隔之后，绘制到目前为止的形状。通过清除画布并绘制数组中的所有点来绘制形状，以便可以绘制的唯一形状是存储在点数组中的形状。

打开新多边形的条件是

isStarted is false
points == null

当多边形完成时isStarted设置为false但是points不设置为null。

问题设置指向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();" />&nbsp;
        <input type="button" value="reset" onclick="reset(); " />&nbsp;
        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画布上绘制超过1个形状

1 个答案: