Javascript不需要的线连接移动弧

时间：2017-07-07 10:56:45

标签： javascript

所以我有这个基本的脚本，让4个圆圈围绕一个中心移动，我已经放入了两个圆圈，这是圆圈所遵循的路线。问题是加入圆圈有奇怪的不需要的线条到了固定的那个。我想这可能是因为圈ctx.arc(cx, cy, 200, 200, 0, 2 * Math.PI);的线在draw函数内。有谁知道如何解决这个问题？ （将静止圆放置在绘图功能之外会导致它们在画布清除时消失。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var dd = 3;
var dd2 = 3;
var dd3 = 3;
var dd4 = 3;
var angle = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var cx = 1000;
var cy = 1000;
var radius = 200;
var radius2 = 300;
var radius3 = 400;
var radius4 = 500;
var fps = 100;
ctx.fillStyle = "yellow";
ctx.strokeStyle = "skyblue";
(function () {
    "use strict";
    function draw(x, y) {
        ctx.save();
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.arc(cx, cy, 75, 75, 0, 2 * Math.PI);
        ctx.fillStyle = "lightgray";
        ctx.arc((x - 50 / 2) + 25, (y - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.arc(cx, cy, 200, 200, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    function draw1(x1, y1) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "orange";
        ctx.arc((x1 - 50 / 2) + 25, (y1 - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.arc(cx, cy, 300, 300, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }   
    function draw2(x2, y2) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc((x2 - 50 / 2) + 25, (y2 - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.arc(cx, cy, 400, 400, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    function draw3(x3, y3) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc((x3 - 50 / 2) + 25, (y3 - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.arc(cx, cy, 500, 500, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / fps);
        };
    }());


    function animate() {
        setTimeout(function () {
            requestAnimFrame(animate);
            ctx.beginPath();
            angle += Math.acos(1 - Math.pow(dd / radius, 2) / 2);
            var newX = cx + radius * Math.cos(angle),
                newY = cy + radius * Math.sin(angle),
                newX1 = cx + radius2 * Math.cos(angle2),
                newY1 = cy + radius2 * Math.sin(angle2),
                newX2 = cx + radius3 * Math.cos(angle3),
                newY2 = cy + radius3 * Math.sin(angle3),
            newX3 = cx + radius4 * Math.cos(angle4),
                newY3 = cy + radius4 * Math.sin(angle4);
            draw(newX, newY);
            ctx.arc(cx, cy, radius, 0, Math.PI * 2);
            ctx.closePath();
            ctx.beginPath();
            angle2 += Math.acos(1 - Math.pow(dd2 / radius2, 2) / 2);
            draw1(newX1, newY1);
            ctx.arc(cx, cy, radius2, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.beginPath();
            angle3 += Math.acos(1 - Math.pow(dd3 / radius3, 2) / 2);
            draw2(newX2, newY2);
            ctx.arc(cx, cy, radius3, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.beginPath();
            angle4 += Math.acos(1 - Math.pow(dd4 / radius4, 2) / 2);
            draw3(newX3, newY3);
            ctx.arc(cx, cy, radius4, 0, 2 * Math.PI);
            ctx.closePath();
        }, 1000 / fps);
    }
    animate();
}());

1 个答案:

答案 0 :(得分：0)

您必须对您创建的每个ctx.beginPath()使用ctx.closePath()，ctx.stroke()和arc，否则它会将它们与行连接起来（因为您自己也必须这样做，如果你正在画画并且不允许从纸上取下铅笔）：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var dd = 3;
var dd2 = 3;
var dd3 = 3;
var dd4 = 3;
var angle = 0;
var angle2 = 0;
var angle3 = 0;
var angle4 = 0;
var cx = 1000;
var cy = 1000;
var radius = 200;
var radius2 = 300;
var radius3 = 400;
var radius4 = 500;
var fps = 100;
ctx.fillStyle = "yellow";
ctx.strokeStyle = "skyblue";
(function () {
    "use strict";
    function draw(x, y) {
        ctx.save();
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.arc(cx, cy, 75, 75, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.fillStyle = "lightgray";
        ctx.beginPath();
        ctx.arc((x - 50 / 2) + 25, (y - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, 200, 200, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }
    function draw1(x1, y1) {
        ctx.save();
        ctx.fillStyle = "orange";
        ctx.beginPath();
        ctx.arc((x1 - 50 / 2) + 25, (y1 - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, 300, 300, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }   
    function draw2(x2, y2) {
        ctx.save();
        ctx.fillStyle = "blue";
        ctx.beginPath();
        ctx.arc((x2 - 50 / 2) + 25, (y2 - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, 400, 400, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }
    function draw3(x3, y3) {
        ctx.save();
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc((x3 - 50 / 2) + 25, (y3 - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(cx, cy, 500, 500, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
    }
    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / fps);
        };
    }());


    function animate() {
        setTimeout(function () {
            requestAnimFrame(animate);
            angle += Math.acos(1 - Math.pow(dd / radius, 2) / 2);
            var newX = cx + radius * Math.cos(angle),
                newY = cy + radius * Math.sin(angle),
                newX1 = cx + radius2 * Math.cos(angle2),
                newY1 = cy + radius2 * Math.sin(angle2),
                newX2 = cx + radius3 * Math.cos(angle3),
                newY2 = cy + radius3 * Math.sin(angle3),
            newX3 = cx + radius4 * Math.cos(angle4),
                newY3 = cy + radius4 * Math.sin(angle4);
            draw(newX, newY);
            ctx.arc(cx, cy, radius, 0, Math.PI * 2);
            angle2 += Math.acos(1 - Math.pow(dd2 / radius2, 2) / 2);
            draw1(newX1, newY1);
            ctx.arc(cx, cy, radius2, 0, 2 * Math.PI);
            angle3 += Math.acos(1 - Math.pow(dd3 / radius3, 2) / 2);
            draw2(newX2, newY2);
            ctx.arc(cx, cy, radius3, 0, 2 * Math.PI);
            angle4 += Math.acos(1 - Math.pow(dd4 / radius4, 2) / 2);
            draw3(newX3, newY3);
            ctx.arc(cx, cy, radius4, 0, 2 * Math.PI);
        }, 1000 / fps);
    }
    animate();
}());
<canvas id="canvas" width="2000" height="2000"></canvas>

E.g。我更改了以下内容：

ctx.beginPath();
ctx.arc(cx, cy, 75, 75, 0, 2 * Math.PI);
ctx.fillStyle = "lightgray";
ctx.arc((x - 50 / 2) + 25, (y - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
ctx.arc(cx, cy, 200, 200, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();

进入这个：

ctx.beginPath();
ctx.arc(cx, cy, 75, 75, 0, 2 * Math.PI);
ctx.closePath(); //Added
ctx.stroke();    //Added
ctx.fillStyle = "lightgray";
ctx.beginPath(); //Added
ctx.arc((x - 50 / 2) + 25, (y - 30 / 2) + 15, 25, 25, 0, 2 * Math.PI);
ctx.closePath(); //Added
ctx.stroke();    //Added
ctx.beginPath(); //Added
ctx.arc(cx, cy, 200, 200, 0, 2 * Math.PI);
ctx.closePath(); //Reversed order (doesn't really matter, but looks better IMO)
ctx.stroke();    //Reversed order (doesn't really matter, but looks better IMO)
相关问题
最新问题