html5把六张图片做成立方体,javascript – html5 canvas正确绘制一个立方体

我只是尝试

HTML5画布,我正在尝试正确绘制等距立方体

这是我当前绘制等距立方体的代码：

function drawCube(x, y, wx, wy, h, color) {

// left face

ctx.beginPath();

ctx.moveTo(x, y);

ctx.lineTo(x - wx, y - wx * 0.5);

ctx.lineTo(x - wx, y - h - wx * 0.5);

ctx.lineTo(x, y - h * 1);

ctx.closePath();

ctx.fillStyle = "#838357"

ctx.strokeStyle = "#7a7a51";

ctx.stroke();

ctx.fill();

// right face

ctx.beginPath();

ctx.moveTo(x, y);

ctx.lineTo(x + wy, y - wy * 0.5);

ctx.lineTo(x + wy, y - h - wy * 0.5);

ctx.lineTo(x, y - h * 1);

ctx.closePath();

ctx.fillStyle = "#6f6f49";

ctx.strokeStyle = "#676744";

ctx.stroke();

ctx.fill();

// center face

ctx.beginPath();

ctx.moveTo(x, y - h);

ctx.lineTo(x - wx, y - h - wx * 0.5);

ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));

ctx.lineTo(x + wy, y - h - wy * 0.5);

ctx.closePath();

ctx.fillStyle = "#989865";

ctx.strokeStyle = "#8e8e5e";

ctx.stroke();

ctx.fill();

}

我有两个问题：

首要问题

在缩放画布时,您可以看到一些像素问题/面重叠：

var canvas = document.createElement("canvas");

var ctx = canvas.getContext('2d');

canvas.width = 800;

canvas.height = 800;

document.body.appendChild(canvas);

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

var sizeX = 32;

var sizeY = 32;

var sizeZ = 8;

ctx.scale(5, 5);

drawCube(50, 50, sizeX, sizeY, sizeZ);

}

requestAnimationFrame(draw);

function drawCube(x, y, wx, wy, h, color) {

// left face

ctx.beginPath();

ctx.moveTo(x, y);

ctx.lineTo(x - wx, y - wx * 0.5);

ctx.lineTo(x - wx, y - h - wx * 0.5);

ctx.lineTo(x, y - h * 1);

ctx.closePath();

ctx.fillStyle = "#838357"

ctx.strokeStyle = "#7a7a51";

ctx.stroke();

ctx.fill();

// right face

ctx.beginPath();

ctx.moveTo(x, y);

ctx.lineTo(x + wy, y - wy * 0.5);

ctx.lineTo(x + wy, y - h - wy * 0.5);

ctx.lineTo(x, y - h * 1);

ctx.closePath();

ctx.fillStyle = "#6f6f49";

ctx.strokeStyle = "#676744";

ctx.stroke();

ctx.fill();

// center face

ctx.beginPath();

ctx.moveTo(x, y - h);

ctx.lineTo(x - wx, y - h - wx * 0.5);

ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));

ctx.lineTo(x + wy, y - h - wy * 0.5);

ctx.closePath();

ctx.fillStyle = "#989865";

ctx.strokeStyle = "#8e8e5e";

ctx.stroke();

ctx.fill();

}

第二个问题

如何确定绘制整个多维数据集所需的画布宽度/高度,然后将多维数据集设置为画布的开头？ (x& y = 0)

第一期我做错了什么？那第二个怎么样？我可以获得修复这些问题的示例/代码段吗？