当我再次绘制时,立方体变大了一点。(画布,JavaScript)

卢卡·加巴兹(Luka Gabadze)

//Selectors
canvas = document.querySelector('.canvas');
canvas.setAttribute("tabindex", 0);
canvas.focus();
pointerImg = document.querySelector('.pointer');


//Variables
const pi = Math.PI;
const c = canvas.getContext('2d');
var grid = {
    'x':60,
    'y':20,
    'size':20,
}
var pointerValues = {
    37: {'x':-1, 'y':0},
    38: {'x':0, 'y':-1},
    39: {'x':1, 'y':0},
    40: {'x':0, 'y':1},
}


//Event Listeners
window.addEventListener('resize', function() {
    //init();
})


var cells = [];
for(let i=0;i<grid.x;i++) {
    cells[i] = new Array(grid.y);
}


//Functions
function init() {
    resizeGrid();
    initCells();

}
init();

function update(){
    requestAnimationFrame(update)

}
update();


function Cell(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = 'white';

    this.update = function() {
        this.draw();
    }

    this.draw = function() {
        c.beginPath();
        c.rect(this.x*this.size, this.y*this.size, this.size, this.size);
        c.strokeStyle = 'black';
        c.stroke();
        c.fillStyle=this.color; c.fill();
        c.closePath();
    }

    this.resetCell = function() {
        c.clearRect(this.x, this.y, this.size, this.size);
        this.update();
    }
}



function resizeGrid() {
    let windowX = window.innerWidth;
    windowX -= windowX*0.1;
    grid.size = windowX/grid.x;
    let canvasX = windowX, canvasY = grid.y * grid.size;
    canvas.width = canvasX;
    canvas.height = canvasY;

}


function initCells() {
    cells = [];
    for(let i=0;i<grid.x;i++) {
        cells[i] = new Array(grid.y);
    }


    for(let i=0;i<grid.x;i++) {
        for(let j=0;j<grid.y;j++) {
            cells[i][j] = new Cell(i, j, grid.size);
            cells[i][j].update();
        }
    }
}
<html>
    <head>
        <link rel="stylesheet" href="assets/css/main.css">
    
        <div style="display:none;">
            <img class='pointer' src="assets/img/pointer.svg">
        </div>

        <div class='nav'>

        </div>
    
    </head>
    <body>
        
        <div class="content">
            <canvas class='canvas'></canvas>
        </div>

        <script src='assets/js/canvas.js'></script>
    </body>
</html>

function Cell(x, y, size) {
  this.x = x;
  this.y = y;
  this.size = size;
  this.color = 'white';

  this.update = function () {
    this.draw();
  }

  this.draw = function () {
    c.beginPath();
    c.rect(this.x * this.size, this.y * this.size, this.size, this.size);
    c.strokeStyle = 'black';
    c.stroke();
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
  }

  this.resetCell = function () {
    c.clearRect(this.x, this.y, this.size, this.size);
    this.update();
  }

这是我在网格中单个单元格的代码。绘制一次后,当我调用resetCell()时,它将绘制单元格稍大一点。

在此处输入图片说明

在这张照片中,我将第一个单元格称为Update,它比其余单元格要大一点。

我已经尝试了几乎所有内容,但似乎没有任何效果。

也有人可以推荐更好的绘制和控制网格的方法。我需要它来演示BFS算法。

尤里卡

您被边界的厚度所迷惑

边框的厚度很容易忘记。如果你画一个框是X宽,其左,右边框是除了以X的宽度

因此,如果不填充内部空间,则外观会很漂亮(左),而如果填充,则外观会很丑陋(右)。

在此处输入图片说明

当您绘制这些正方形的网格时,每个网格都覆盖了先前正方形的右手边和底边,因此不清楚发生了什么。

除非您像我在此处所做的那样重画一个不是列表的最后一个(下中间)。然后很明显,出了点问题。

在此处输入图片说明

这是重现以上数字的代码,下面我建议一个解决方案。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// With NO fill, it looks fine
ctx.beginPath();
ctx.rect(40, 40, 40, 40);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.rect(80, 80, 40, 40);
ctx.stroke();
ctx.closePath();

// With white fill, the inner half of each box gets covered up by the white fill.
ctx.beginPath();
ctx.rect(140, 40, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(180, 80, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();

// Make Grid. This part looks OK initially.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.rect(240, 40, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(240, 80, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(280, 40, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(280, 80, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(320, 40, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(320, 80, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();

// Redraw one: this will look messed up.
ctx.beginPath();
ctx.rect(280, 80, 40, 40);
ctx.stroke();
ctx.fillStyle="white"; 
ctx.fill();
ctx.closePath();
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="150" ></canvas>



</body>
</html>

解决方案1.不要填满室内

这是最巧妙的解决方案,如果您可以避免的话,则不管边框厚度(非零)如何,它都可以工作。

解决方案2.缩小宽度以保留边框厚度

这很复杂,因为您需要手动设置边框粗细,并且意识到除了为矩形大小指定的数值之外,还需要设置边框粗细。

即使CSS技巧试图使边框变得有趣,也要看看这个杂乱无章的业务!https://css-tricks.com/almanac/properties/b/border/

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

Swift SCNNode 3D立方体旋转到立方体上的一个点

来自分类Dev

在拖动和滚动时旋转JavaScript立方体

来自分类Dev

在立方体上绘制表面

来自分类Dev

html5 canvas正确绘制一个立方体

来自分类Dev

JavaScript threejs 3D绘制带边框的立体立方体

来自分类Dev

当我使用诸如RotateZ()之类的CSS变换时,为什么立方体会“跳”?

来自分类Dev

如何使用GnuPlot绘制立方体/矩形?

来自分类Dev

OpenGL没有渲染我的立方体

来自分类Dev

创建一个立方体打开动画

来自分类Dev

检查一个完美的立方体

来自分类Dev

当我们可以简单地做到这一点时,为什么要在创建链表时创建堆呢?

来自分类Dev

OpenGL立方体着色

来自分类Dev

调整立方体大小

来自分类Dev

向右滑动时如何旋转到3D立方体的另一面

来自分类Python

在Matplotlib中绘制3d立方体,球体和向量

来自分类Dev

用Matlab绘制3-D RGB立方体模型

来自分类Dev

rgl:绘制带有彩色面,顶点和线的立方体

来自分类Dev

如何使用Matplotlib在立方体上进行4D轮廓绘制?

来自分类Dev

当角色碰撞器与立方体碰撞器碰撞时,ThirdPersonController移动时口吃吗?

来自分类Java

旋转面rubiks立方体

来自分类Dev

超立方体的适用实例

来自分类Dev

如何通过立方体的中心旋转

来自分类Dev

如何计算一个立方体的一半范围?

来自分类Dev

为什么我的立方体向左移动快于向右移动?

来自分类Dev

当鼠标指针相交时与Obelisk.js中的等距立方体相交

来自分类Dev

在Swift-Scene Kit中开始识别触摸时碰到的立方体的面孔

来自分类Python

如何为同一点绘制多种颜色?

来自分类Dev

iOS:在矩形的一点上绘制文本

来自分类Dev

在MATLAB中用小立方体填充整个立方体的体积

TOP 榜单

热门标签

归档