1 说明：
=====
1.1 html制作立方体。
1.2 滑动条调节长、宽、高，并自动生成体积和表面积。
1.3 熟悉和复习html的基本知识，主要是立方体的绘制和input滑动条制作等。
2 效果图：
3 第一步：
微软编辑器vscode打开，新建一个文件，保存cube.html；
英文状态下，! 加回车键（enter），新建html骨架。
4 第二步：css部分的style在head内；而body内有form和script，骨架图。
5 第三步：head内的css部分代码：（注释版）
<style>
/*网页整体设置*/
* {
/*网页背景颜色*/
background: black;
}
body {
/*overflow=网页上下和左右滑动条==隐藏=hodden*/
overflow: hidden;
}
/*表格-调节滑动条设置*/
form {
/*绝对定位,固定的*/
position: absolute;
/*绝对定位是通过下面的指标固定的*/
bottom: 0;
left: 0;
right: 0;
/*以上三个指标提示，表格-调节滑动条的位置是，底部0，左右均为0，代表在底部位置*/
/*背景颜色的方法：white=#efefef=白色*/
background: rgb(0, 225, 255);
/*内边距属性 padding复习*/
/* 应用到四条边 Apply to all four sides */
/* 顶部| 右边| 底部| 左边*/
padding: 0 0 0 1em;
/*padding: 1em复习;*/
/*“em”是一个相对的大小,1em=16px,建议采用em，不会因为改变UI控件而出现网页的崩溃*/
/*在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系*/
/*1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em*/
/*居中*/
/*text-align: center;*/
}
</style>
6 第四步：body内的form部分的代码：（注释版），注意小的js代码就紧随input后面调用等等。
<!--表格-调节滑动条：立方体的长、宽、高和颜色的调节-->
<form style="width: 150px; height: 500px;">
<!--注意：x、z、y和color的顺序，就是水平由左向右的顺序-->
<!--x=长-->
<input type="text" style="width: 20px; height: 10px;color: white;" value="长">
<input type="range" max="400" min="0" value="100" id="x" onmousemove="xanxia()" /><br />
<span
id="lenghtx" style="width: 50px; height: 20px;color: white;"></span>
<br />
<script>
function xanxia() {
document.getElementById(
'lenghtx'
).innerHTML = document.getElementById('x').value
}
</script>
<!--z=宽-->
<input type="text" style="width: 20px; height: 10px;color: white;" value="宽">
<input type="range" max="400" min="0" value="100" id="z" onmousemove="zanxia()" /><br />
<span
id="lenghtz" style="width: 50px; height: 20px;color: white;"></span>
<br />
<script>
function zanxia() {
document.getElementById(
'lenghtz'
).innerHTML = document.getElementById('z').value
}
</script>
<!--y=高-->
<input type="text" style="width: 20px; height: 10px;color: white;" value="高">
<input type="range" max="400" min="0" value="100" id="y" onmousemove="yanxia()" /><br />
<span
id="lenghty" style="width: 50px; height: 20px;color: white;"></span>
<br />
<script>
function yanxia() {
document.getElementById(
'lenghty'
).innerHTML = document.getElementById('y').value
}
</script>
<!--初始化立方体的颜色：黄色==#DBFF3E-->
<input type="text" style="width: 40px; height: 10px;color: white;" value="颜色">
<input id="color" type="color" value="#DBFF3E">
<br />
<!--体积-->
<input type="text" style="width: 30px; height: 10px;color: white;" value="体积" onmousemove="ztiji()"/>
<br />
<span
id="tiji" style="width: 80px; height: 20px;color: white;"></span>
<br />
<script>
function ztiji() {
document.getElementById(
'tiji'
).innerHTML = document.getElementById('y').value*document.getElementById('x').value*document.getElementById('z').value
}
</script>
<!--表面积-->
<input type="text" style="width: 40px; height: 10px;color: white;" value="表面积" onmousemove="biaomianji()"/>
<br />
<span
id="bmianji" style="width: 80px; height: 20px;color: white;"></span>
<br />
<script>
function biaomianji() {
document.getElementById(
'bmianji'
).innerHTML = 2*((document.getElementById('y').value*document.getElementById('x').value)
(document.getElementById('y').value*document.getElementById('z').value) (document.getElementById('x').value*document.getElementById('z').value))
}
</script>
</form>
7 第五步：body的js=JavaScript代码部分。
<!--内置js代码块-->
<script type="text/javascript">
var canvas = document.createElement('canvas');//原生JS创建canvas
canvas.width = window.innerWidth;//画布的宽就是窗口显示区域的宽
canvas.height = window.innerHeight;//画布的宽就是窗口显示区域的高
document.body.appendChild(canvas); //画布挂在网页body上
//当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
var ctx = canvas.getContext('2d');
var x = document.querySelector('#x');//找到x
var z = document.querySelector('#z');//找到z
var y = document.querySelector('#y');//找到y
var color = document.querySelector('#color');//找到color
// 定义画图draw函数
function draw() {
// 在给定范围内清空一个矩形
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Wobble the cube using a sine wave
var wobble = Math.sin(Date.now() / 250) * window.innerHeight / 50;
// 画立方体
drawCube(
window.innerWidth / 2, //x坐标
window.innerHeight / 2 wobble y.value / 2, //y坐标
Number(x.value), //长
Number(z.value), //宽
Number(y.value), //高
color.value //cube立方体的表面颜色
);
requestAnimationFrame(draw);
}
draw();
// Colour adjustment function==调节颜色函数
function shadeColor(color, percent) {
color = color.substr(1);
var num = parseInt(color, 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) amt,
G = (num >> 8 & 0x00FF) amt,
B = (num & 0x0000FF) amt;
return '#' (0x1000000 (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}
// 定义画立方体的函数
function drawCube(x, y, wx, wy, h, color) {
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 = shadeColor(color, -10);
ctx.strokeStyle = color;
ctx.stroke();
ctx.fill();
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 = shadeColor(color, 10);
ctx.strokeStyle = shadeColor(color, 50);
ctx.stroke();
ctx.fill();
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 = shadeColor(color, 20);
ctx.strokeStyle = shadeColor(color, 60);
ctx.stroke();
ctx.fill();
}
</script>
8 完整代码：修改标题和删减注释等，稍微简洁些的代码。
<!DOCTYPE html>
<html>
<head>
<!--网页标题名-->
<title>高级可变的立方体悬浮</title>
<!--网页CSS设置-->
<style>
/*网页整体设置*/
* {
/*网页背景颜色*/
background: black;
}
body {
/*overflow=网页上下和左右滑动条==隐藏=hodden*/
overflow: hidden;
}
/*表格-调节滑动条设置*/
form {
/*绝对定位,固定的*/
position: absolute;
/*绝对定位是通过下面的指标固定的*/
bottom: 0;
left: 0;
right: 0;
/*背景颜色的方法：white=#efefef=白色*/
background: rgb(0, 225, 255);
/* 顶部| 右边| 底部| 左边*/
padding: 0 0 0 1em;
}
</style>
</head>
<body>
<!--表格-调节滑动条：立方体的长、宽、高和颜色的调节-->
<form style="width: 150px; height: 500px;">
<!--注意：x、z、y和color的顺序，就是水平由左向右的顺序-->
<!--x=长-->
<input type="text" style="width: 20px; height: 10px;color: white;" value="长">
<input type="range" max="400" min="0" value="100" id="x" onmousemove="xanxia()" /><br />
<span
id="lenghtx" style="width: 50px; height: 20px;color: white;"></span>
<br />
<script>
function xanxia() {
document.getElementById(
'lenghtx'
).innerHTML = document.getElementById('x').value
}
</script>
<!--z=宽-->
<input type="text" style="width: 20px; height: 10px;color: white;" value="宽">
<input type="range" max="400" min="0" value="100" id="z" onmousemove="zanxia()" /><br />
<span
id="lenghtz" style="width: 50px; height: 20px;color: white;"></span>
<br />
<script>
function zanxia() {
document.getElementById(
'lenghtz'
).innerHTML = document.getElementById('z').value
}
</script>
<!--y=高-->
<input type="text" style="width: 20px; height: 10px;color: white;" value="高">
<input type="range" max="400" min="0" value="100" id="y" onmousemove="yanxia()" /><br />
<span
id="lenghty" style="width: 50px; height: 20px;color: white;"></span>
<br />
<script>
function yanxia() {
document.getElementById(
'lenghty'
).innerHTML = document.getElementById('y').value
}
</script>
<!--初始化立方体的颜色：黄色==#DBFF3E-->
<input type="text" style="width: 40px; height: 10px;color: white;" value="颜色">
<input id="color" type="color" value="#DBFF3E">
<br />
<!--体积-->
<input type="text" style="width: 30px; height: 10px;color: white;" value="体积" onmousemove="ztiji()"/>
<br />
<span
id="tiji" style="width: 80px; height: 20px;color: white;"></span>
<br />
<script>
function ztiji() {
document.getElementById(
'tiji'
).innerHTML = document.getElementById('y').value*document.getElementById('x').value*document.getElementById('z').value
}
</script>
<!--表面积-->
<input type="text" style="width: 40px; height: 10px;color: white;" value="表面积" onmousemove="biaomianji()"/>
<br />
<span
id="bmianji" style="width: 80px; height: 20px;color: white;"></span>
<br />
<script>
function biaomianji() {
document.getElementById(
'bmianji'
).innerHTML = 2*((document.getElementById('y').value*document.getElementById('x').value)
(document.getElementById('y').value*document.getElementById('z').value) (document.getElementById('x').value*document.getElementById('z').value))
}
</script>
</form>
<!--内置js代码块-->
<script type="text/javascript">
var canvas = document.createElement('canvas');//原生JS创建canvas
canvas.width = window.innerWidth;//画布的宽就是窗口显示区域的宽
canvas.height = window.innerHeight;//画布的宽就是窗口显示区域的高
document.body.appendChild(canvas); //画布挂在网页body上
//当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
var ctx = canvas.getContext('2d');
var x = document.querySelector('#x');//找到x
var z = document.querySelector('#z');//找到z
var y = document.querySelector('#y');//找到y
var color = document.querySelector('#color');//找到color
// 定义画图draw函数
function draw() {
// 在给定范围内清空一个矩形
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Wobble the cube using a sine wave
var wobble = Math.sin(Date.now() / 250) * window.innerHeight / 50;
// 画立方体
drawCube(
window.innerWidth / 2, //x坐标
window.innerHeight / 2 wobble y.value / 2, //y坐标
Number(x.value), //长
Number(z.value), //宽
Number(y.value), //高
color.value //cube立方体的表面颜色
);
requestAnimationFrame(draw);
}
draw();
// Colour adjustment function==调节颜色函数
function shadeColor(color, percent) {
color = color.substr(1);
var num = parseInt(color, 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) amt,
G = (num >> 8 & 0x00FF) amt,
B = (num & 0x0000FF) amt;
return '#' (0x1000000 (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}
// 定义画立方体的函数
function drawCube(x, y, wx, wy, h, color) {
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 = shadeColor(color, -10);
ctx.strokeStyle = color;
ctx.stroke();
ctx.fill();
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 = shadeColor(color, 10);
ctx.strokeStyle = shadeColor(color, 50);
ctx.stroke();
ctx.fill();
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 = shadeColor(color, 20);
ctx.strokeStyle = shadeColor(color, 60);
ctx.stroke();
ctx.fill();
}
</script>
</body>
</html>
===完美===
学习python的人，有必要知道一点html、css、js=JavaScript。
喜欢的人，点赞、关注、评论、转发和收藏。
,
