Ответ 1
Вы можете нарисовать все, что хотите на холсте, до отдельного пикселя, поэтому любой вопрос типа "возможно" будет иметь ответ "да".
Если вы имеете в виду, что 3D-конвейер уже встроен в холст, ответ не будет, контекст canvas равен 2d, поэтому команды 2d. Вы можете настроить матрицу, которая сделает ваши команды рисования квадратов похожими на изометрическое представление, но вы не сможете нарисовать что-либо выше или ниже этой плоскости.
Вы можете, конечно, сделать 3D-рендеринг (либо изометрический, либо перспективный) на холсте, используя стандартные методы отображения 3d- > 2d. См. Например это 4k demo, в котором используется только canvas/javascript (здесь видео youtube, если ваш браузер не поддерживает HTML5).
Для изометрического представления часть настройки матрицы проще... например
var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);
var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;
ctx.setTransform(a, d, b, e, c, f);
где ctx
представляет собой контекст canvas, будет создана матрица, которая:
- имеет угол поворота XY
angle1
- имеет угол наклона вида
angle2
- отображает длину от 1 до 100 пикселей.
- карты (0, 0) до 200, 200
Вы можете увидеть небольшой пример этих формул в действии на этой странице примера.