JavaScript-приложения — различия между версиями

function MainRW() {
    var canvas  = document.getElementById('canvasRW');
    var context = canvas.getContext("2d");

    var start = 0;
    var d, x, y;
    var w = canvas.width;
    var h = canvas.height;

    setInterval(tick, 30);


    function Rand() {
        return Math.floor(3 * Math.random()) - 1;
    }

    function tick() {
        if (start == 0) {
            start = 1;
            d = 10;
            x = w / 2;
            y = h / 2;
        }
        else {
            x = x + d * Rand();
            y = y + d * Rand();
            if (x < 0) x = x + w;
            if (x > w-10) x = x - w;
            if (y < 0) y = y + h;
            if (y > h-10) y = y - h;
        }

        context.fillStyle = "rgb("+
            Math.floor(Math.random()*256)+","+
            Math.floor(Math.random()*256)+","+
            Math.floor(Math.random()*256)+")";
        context.beginPath();
        context.rect(x, y, d-1, d-1);
        context.closePath();
        context.fill();
    }
}

function MainMU() {
    var canvas  = document.getElementById('canvasMU');
    var context = canvas.getContext("2d");

    var w = canvas.width;
    var h = canvas.width;

    var y0 = h / 2;
    var r = w  / 7;

    var canvas = oCanvas.create({
        canvas: "#canvasMU",
        fps: 60
    });

    var rectangle = canvas.display.rectangle({
        x: r,
        y: y0-r*2,
        width: 2*r,
        height: 2*r,
        fill: "rgba(255, 0, 0, 1)"
    });

    var arc = canvas.display.arc({
        x: 5*r,
        y: y0-r,
        radius: r,
        start: 0,
        end: 360,
        fill: "rgba(0, 0, 255, 1)"
    });

    canvas.addChild(rectangle);
    canvas.addChild(arc);

    rectangle.dragAndDrop({
        changeZindex: true,,
        move: function ()  {this.fill = "rgba(255, 0, 0, 0.5)";},
        end: function ()    {this.fill = "rgba(255, 0, 0, 1)";}
    });
    arc.dragAndDrop({
        changeZindex: true,
        move: function ()  {this.fill = "rgba(0, 0, 255, 0.5)";},
        end: function ()    {this.fill = "rgba(0, 0, 255, 1)";}
    });
}