Creat a 3d object on a 2d canvas's game

Click here for free DL of the app version that can save data.

No:48714

←

Prev Next

→

Creat a 3d object on a 2d canvas
Developer User18896｜Date and time 24/3/2 21:16:28
Build time 9.369 sec｜Game capacity 1.949KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<html>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// create 3D cube object
const cube = {
  x: 200,
  y: 200,
  z: 100,
  width: 50,
  height: 50,
  depth: 50
};

// function to draw the 3D cube on the canvas
function drawCube() {
  // draw back face of cube
  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.moveTo(cube.x, cube.y);
  ctx.lineTo(cube.x + cube.width, cube.y);
  ctx.lineTo(cube.x + cube.width - cube.depth, cube.y - cube.depth);
  ctx.lineTo(cube.x - cube.depth, cube.y - cube.depth);
  ctx.fill();
  
  // draw front face of cube
  ctx.fillStyle = 'lightblue';
  ctx.beginPath();
  ctx.moveTo(cube.x, cube.y - cube.z);
  ctx.lineTo(cube.x + cube.width, cube.y - cube.z);
  ctx.lineTo(cube.x + cube.width - cube.depth, cube.y - cube.z - cube.depth);
  ctx.lineTo(cube.x - cube.depth, cube.y - cube.z - cube.depth);
  ctx.fill();
  
  // draw left face of cube
  ctx.fillStyle = 'skyblue';
  ctx.beginPath();
  ctx.moveTo(cube.x - cube.depth, cube.y - cube.depth);
  ctx.lineTo(cube.x, cube.y);
  ctx.lineTo(cube.x, cube.y - cube.z);
  ctx.lineTo(cube.x - cube.depth, cube.y - cube.z - cube.depth);
  ctx.fill();
  
  // draw right face of cube
  ctx.fillStyle = 'dodgerblue';
  ctx.beginPath();
  ctx.moveTo(cube.x + cube.width, cube.y);
  ctx.lineTo(cube.x + cube.width, cube.y - cube.z);
  ctx.lineTo(cube.x + cube.width - cube.depth, cube.y - cube.z - cube.depth);
  ctx.lineTo(cube.x + cube.width - cube.depth, cube.y - cube.depth);
  ctx.fill();
  
  // draw top face of cube
  ctx.fillStyle = 'deepskyblue';
  ctx.beginPath();
  ctx.moveTo(cube.x, cube.y - cube.z);
  ctx.lineTo(cube.x + cube.width, cube.y - cube.z);
  ctx.lineTo(cube.x + cube.width, cube.y);
  ctx.lineTo(cube.x, cube.y);
  ctx.fill();
}

// call the drawCube function to draw the cube on the canvas
drawCube();
</script>
</body>
</html>