Question

我有一个随机数量的盒子，随机着色，随机放在页面上。目标是在用鼠标点击其中一个时移动它们。指针也假设与盒子的左上角保持恒定距离。

我通常对整个鼠标事件的想法感到困惑，所以这对我自己来说是一个很熟悉它的好方法。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ramdom Boxes</title>
        <script src="A2Q1.js"></script>
    </head>

    <body>      
    </body>
</html>

JavaScript：

window.onload = init;

function init() {
    //when page is loaded create a bunch of boxes randomly throughout the page
    //get the body element of the document
    var body = document.getElementsByTagName("body")[0];

    //create the canvas tag
    var canvas = document.createElement("canvas");
    canvas.height = 666;
    canvas.width = 1346;
    var context = canvas.getContext("2d");

    //create the random boxes and append onto the canvas
    var randNum = Math.floor(Math.random() * 1000 + 1);
    for(var i=0;i<randNum;i++){

        var boxHeight = 50;
        var boxWidth = 50;
        var randCordX = Math.floor(Math.random() * (1346 - boxWidth));
        var randCordY = Math.floor(Math.random() * (666 - boxHeight));
        var colour = '#'+ Math.round(0xffffff * Math.random()).toString(16);

        context.fillStyle = colour;
        context.fillRect(randCordX, randCordY, boxWidth, boxHeight); 
    }

    //append the canvas onto the body 
    body.appendChild(canvas);
}

Answer 1

这是一个关于在Canvas中制作可移动框的好教程：http://simonsarris.com/blog/510-making-html5-canvas-useful

为了拥有可移动的盒子，你需要有一个引用盒子的变量。现在，您只需在画布上绘制fillrect，这会修改画布的外观，但不会存储您在任何可以进一步操作它们的地方创建的框。

以下是您可以这样做的方法：用以下方法替换创建盒子的循环：

var boxes = [];
for(var i=0;i<randNum;i++){
    boxes[i].height = 50;
    boxes[i].width = 50;
    boxes[i].x = Math.floor(Math.random() * (1346 - boxes[i].width));
    boxes[i].y = Math.floor(Math.random() * (666 - boxes[i].height));

    boxes[i].colour = '#'+ Math.round(0xffffff * Math.random()).toString(16);
}

要拥有移动的盒子，您需要更新屏幕，并在您的循环中包含绘图：

for(var i=0;i<boxes.length;i++){
    context.fillStyle = colour;
    context.fillRect(boxes[i].x, boxes[i].y, , boxes[i].height); 
}

如何在页面上移动框？

1 个答案: