正方体的表面积和体积（求立方体的体积和表面积）

4 第二步：css部分的style在head内；而body内有form和script，骨架图。

5 第三步：head内的css部分代码：（注释版）

6 第!四步：body"内的form部分的代码：（注释版），注意小的js代码就紧随input后面调用等等。

<作立方体。

1.2 滑动条调节长、宽、高，并自动生成体积和表面积。

1.3 熟悉和复习html的基本知识，主要是立方体的绘制和input滑动条制作等。

2 效--初始化立方体的颜色：黄色==果图：

3 第一步：

微软编辑器vscode打开，新建一个文件，保存cube.html；

英文--体积-->

<" style="width: 20px; height: 10px;color: white;" value="长">

id="lenghtx" style="width: 50px; height: 20px;color: white;">

--内置js代码块-->

function yanxia() {

! documen"t.getElementById(

'lenghty'

).innerHTML = document.getElementById('y').value

}

id="tiji" style="width: 80px; height: 20px;color: white;">

id="bmianji" style="width: 80px; height: 20px;color: white;">

7 第五步：body的js=JavaScript代码部分。

< style=

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.roun 0x00FF) + amt,

DOCTYPE html>

< B = d(2.55 0x0000FF) + amt;

return '* percent),

( G = (num num >> 8 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);

--z=宽-->

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);

--y=高-->

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.close"Path();

ctx.fillStyle = shadeColor(color, 20);

ctx.strokeStyle = shadeColor(color, 60);

ctx.stroke();

--初始化立方体的颜色：黄色==ctx.fill();

}

8 完--体积-->

< value="长">

id="lenghtx" style="width: 50px; height: 20px;color: white;">

--内置js代码块-->

id="tiji" style="width: 80px; height: 20px;color: white;">

id="bmianji" style="width: 80px; height: 20px;color: white;">