Fatal编程技术网
  • javascript/
  • Javascript 无法在html5画布上绘制多于1个形状

Javascript 无法在html5画布上绘制多于1个形状

javascript html5-canvas

Javascript 无法在html5画布上绘制多于1个形状,javascript,html5-canvas,Javascript,Html5 Canvas,这里我有一个在画布上绘制多边形的程序。问题是它只画一个多边形。我似乎无法解决这个问题，因为为什么我只能画一个多边形。在我完成绘制第一个形状后，光标移动到画布上，什么也没有发生 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="board"> &

这里我有一个在画布上绘制多边形的程序。问题是它只画一个多边形。我似乎无法解决这个问题，因为为什么我只能画一个多边形。在我完成绘制第一个形状后，光标移动到画布上，什么也没有发生

<!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>





库勒：
红色
蓝色
绿色
黑色
黄色的


身体{
保证金：0；
}
#董事会{
保证金：0自动；
宽度：500px；
}
#我的画布{
边框：3个点#000；
}
var END_单击_半径=5；
//poygon的最大点数
var MAX_POINTS=8；
var-mouseX=0；
var-mouseY=0；
var isStarted=假；
var点=空；
var=null；
var-ctx=null；
window.onload=函数（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
变色（“红色”）；
canvas.addEventListener（“单击”，函数（e）{
var x=e.clientX-canvas.offsetLeft；
变量y=e.clientY-canvas.offsetTop；
如果（已启动）{
//绘制下一条直线，并根据需要闭合多边形
if（Math.abs（x点[0].x）=最大点数）{
isStarted=false；
}
}
}else如果（点==null）{
//打开多边形
点=新数组（）；
点[0]=新点（x，y）；
IsStart=true；
}
}，假）；
//我们只保存鼠标的位置
canvas.addEventListener（“mousemove”，函数（e）{
mouseX=e.clientX-canvas.offsetLeft；
mouseY=e.clientY-canvas.offsetTop；
}，假）；
//刷新时间
setInterval（“draw（）；”，100）；
}
//更改绘图的颜色
功能更改颜色（颜色）{
ctx.strokeStyle=颜色；
}
//表示点的对象
功能点（x，y）{
这个.x=x；
这个。y=y；
}
//重置应用程序
函数重置（）{
isStarted=false；
点数=零；
}
//警告点列表
函数save（）{
如果（点==null）{
警惕（“无需保存”）；
}否则{
var s=“”；
用于（以点为单位的var a）{
//通过（canvas.height-points[a].y）反转y轴
s++=“（“+点[a].x+”，“+（canvas.height-points[a].y）+”）\n”；
}
警报；
}
}
//绘制当前章节
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
如果（点！=null&&points.length>0）{
移动到（点[0].x，点[0].y）；
对于（i=1；i
考虑数据存储和代码流

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

打开新多边形的条件如下：

  • isStarted是假的

  • 点==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>

    


    
库勒：
红色
蓝色
绿色
黑色
黄色的

    
身体{
保证金：0；
}
#董事会{
保证金：0自动；
宽度：500px；
}
#我的画布{
边框：3个点#000；
}
var END_单击_半径=5；
//poygon的最大点数
var MAX_POINTS=8；
var-mouseX=0；
var-mouseY=0；
var isStarted=假；
var点=空；
var shapes=新数组（）；
var=null；
var-ctx=null；
window.onload=函数（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
变色（“红色”）；
canvas.addEventListener（“单击”，函数（e）{
var x=e.clientX-canvas.offsetLeft；
变量y=e.clientY-canvas.offsetTop；
如果（已启动）{