如何在画布中容纳多个旋转矩形(Java脚本)

sf6xfgos 于 2022-10-02 发布在 Java

关注(0)|答案(2)|浏览(151)

如前所述，我正试图在画布中放置一个完整的矩形圆圈，但如图所示，我只能显示该圆圈的四分之一。我用画布元素制作了一个基本的html文档。相对于画布元素的大小，我制作了一个矩形并将其居中放置在画布的中间。在此基础上，我尝试创建一个for循环，该循环应该在旋转矩形的同时做一个完整的圆。但这并没有奏效。

body{
    background-color: #000000;
}

canvas {
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border:1px solid
}

<html>
    <body>
        <link rel="stylesheet" href="canvas.css">
        <canvas id="myCanvas" width="900" height="900" ></canvas>

        <script>
        // Get id from canvas element
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // Change size of rectangle
        var recWidth = 40
        var recHeight = 40

        // Position rectangle in the middle of the canvas    
        var xPos = (document.getElementById("myCanvas").width/2) - (recWidth/2);   
        var yPos = (document.getElementById("myCanvas").height/2) - (recHeight/2);

        // Convert degree to radian
        const degToRad = (degrees) => {
            return degrees / 180 * Math.PI;
        }    

        // Number of rectangles
        const num = 36;

        for (let i = 0; i<num; i++){
            const slice = degToRad (360 / num);
            const angle = slice * i; 

        context.fillStyle = 'green';
        context.save();
        context.rotate (angle);            
        context.beginPath();
        context.rect(xPos,yPos,recWidth,recHeight);
        context.fill();
        context.restore();
        }

        </script> 

        </body>

</html>

JavaScript

来源：https://stackoverflow.com/questions/73921298/how-to-fit-multiple-rotating-rectangle-inside-the-canvas-javascript

2条答案

按热度按时间

jmo0nnb31#

问题是，你的大部分方块都是在画布的边界之外绘制的。

画布似乎围绕(0，0)旋转，而不是围绕中心旋转。

在循环之外：

// Use a different center and a smaller radius
var xPos = (document.getElementById("myCanvas").width/4) - (recWidth/4);   
var yPos = (document.getElementById("myCanvas").height/4) - (recHeight/4);
// Move the center 
context.translate(xPos * 2, yPos * 9/4);
context.font = "14pt Arial";

在循环内部：

context.fill(); // existing line of code
context.fillText(i, xPos-30, yPos-30); // added
context.restore(); // existing

另外：您可以使用context.fulRect()，而不是context.eginPath()、context.rect()和context.ill()。

赞(0）回复(0）举报 2022-10-02

tjvv9vkg2#

我希望我创建单独的答案没有违反SO协议，但我这样做是为了避免新代码的一些混乱。

以下是您的代码的一个经过清理的版本。
解释：
将旋转中心移动到画布的中心：
上下文.平移(宽度/2，高度/2)
然后将绘图半径指定为画布尺寸的四分之一。
Rad=xPos/2
一次旋转一个切片，将其保留在原地(不保存/恢复)。
(删除不正确的声明)

<script>
// Get id from canvas element
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "14pt Arial";
context.fillStyle = "green";

// Change size of rectangle
var recWidth = 30
var recHeight = 30

// Position rectangle in the middle of the canvas    

var canvW = document.getElementById("myCanvas").width;
var canvH = document.getElementById("myCanvas").height;
var xPos = canvW/2;
var yPos = canvH/2;
var rad = xPos/2;  // radius = 1/4 of canvas dimensions
context.translate(xPos,yPos);  // rotate around the center

// Convert degree to radian
const degToRad = (degrees) => {
    return degrees / 180 * Math.PI;
}    

// Number of rectangles
const num = 36;
const slice = degToRad (360 / num);
const angle = slice; 

// animates the drawing to help see what is going on
// by introducing 1/2 second delay between individual draws
function draw1Rect(i)
    {
        i++;
        if (i < num) setTimeout("draw1Rect("+i+")", 500);
        context.rotate (angle);            
        context.fillRect(rad,rad,recWidth,recHeight);
        context.fillText(i, rad-30, rad-30);
    }
    draw1Rect(0);
</script>

赞(0）回复(0）举报 2022-10-02

我来回答

如何在画布中容纳多个旋转矩形(Java脚本)

2条答案

相关问题

热门标签

最新问答