Я работал на холсте и сталкивался с идеей изменения размеров куба. Итак, используя HTML5 Canvas, я составил этот куб, который имеет два квадрата, соединенных линиями, чтобы сделать его похожим на куб.
Я хочу, чтобы, когда я выбираю тип куба, выберите куб, который должен автоматически меняться в зависимости от длины и ширины выбранного параметра. Высота остается постоянной. Например, если я выбираю куб 5x5, который по умолчанию является кубом, но когда я выбираю вариант 5x10, ширина (фронт) не должна изменяться, а длина (сторона) куба должна расширяться, и наоборот, если я выберите 10x5 мой максимальный вариант - 25x15. Поскольку вы можете видеть, что холст, который я создал ниже, находится в пикселях, сначала мне нужно преобразовать эти пиксели в сантиметры (см), а затем в сантиметры в кубические метры.
Весь куб должен быть выровнен в заданной области холста.
Вот скрипка
var canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 300;
var contxt = canvas.getContext('2d');
//squares
/*
contxt.fillRect(x, y, widht, height);
*/
contxt.strokeStyle = 'grey';
var fillRect = false;
contxt.fillStyle = 'rgba(0, 0, 0, 0.2)';
contxt.rect(80, 80, 100, 100);
contxt.rect(120, 40, 100, 100);
if (fillRect) {
contxt.fill();
}
contxt.stroke();
/*Lines
contxt.beginPath();
contxt.moveTo(x, y);
contxt.lineTo(300, 100);
*/
contxt.beginPath();
contxt.moveTo(80, 80);
contxt.lineTo(120, 40);
contxt.moveTo(180, 80);
contxt.lineTo(220, 40);
contxt.moveTo(80, 180);
contxt.lineTo(120, 140);
contxt.moveTo(180, 180);
contxt.lineTo(220, 140);
contxt.stroke();
canvas {
border: 1px solid #000;
}
select {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>5x5</option>
<option>5x10</option>
<option>10x5</option>
</select>
<canvas></canvas>