以下是一个简单的三维手图纸示例，可以通过旋转和缩放手图纸来观察三维图形：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三维手绘纸</title>
<style>
#canvas {
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var scale = 1;
var angleX = 0;
var angleY = 0;
var angleZ = 0;
var vertices = [
[-50, -50, -50],
[50, -50, -50],
[50, 50, -50],
[-50, 50, -50],
[-50, -50, 50],
[50, -50, 50],
[50, 50, 50],
[-50, 50, 50]
];
var faces = [
[0, 1, 2, 3],
[1, 5, 6, 2],
[5, 4, 7, 6],
[4, 0, 3, 7],
[0, 4, 5, 1],
[3, 2, 6, 7]
];
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(centerX, centerY);
ctx.scale(scale, scale);
ctx.rotateX(angleX);
ctx.rotateY(angleY);
ctx.rotateZ(angleZ);
ctx.beginPath();
for (var i = 0; i < faces.length; i++) {
var face = faces[i];
ctx.moveTo(vertices[face[0]][0], vertices[face[0]][1]);
for (var j = 1; j < face.length; j++) {
ctx.lineTo(vertices[face[j]][0], vertices[face[j]][1]);
}
ctx.closePath();
}
ctx.stroke();
ctx.restore();
}
function rotateX(angle) {
angleX += angle;
draw();
}
function rotateY(angle) {
angleY += angle;
draw();
}
function rotateZ(angle) {
angleZ += angle;
draw();
}
function zoomIn() {
scale += 0.1;
draw();
}
function zoomOut() {
scale -= 0.1;
if (scale < 0.1) {
scale = 0.1;
}
draw();
}
document.onkeydown = function (event) {
switch (event.keyCode) {
case 37: // 左箭头键
rotateY(-10);
break;
case 38: // 上箭头键
rotateX(-10);
break;
case 39: // 右箭头键
rotateY(10);
break;
case 40: // 下箭头键
rotateX(10);
break;
case 90: // Z 键
rotateZ(10);
break;
case 88: // X 键
rotateZ(-10);
break;
case 187: // 加号键
case 107: // 数字键盘加号键
zoomIn();
break;
case 189: // 减号键
case 109: // 数字键盘减号键
zoomOut();
break;
}
};
draw();
</script>
</body>
</html>
```
此程序使用了 HTML5 的 `canvas` 元素来绘制三维图形。手绘纸的坐标系默认以屏幕中心为原点，可以通过旋转和缩放手绘纸来实现观察三维图形的效果。通过监听键盘事件，可以实现旋转和缩放手绘纸的交互操作。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
