昨天我们画完了乘客，今天我们继续画电梯、电梯门以及召唤电梯的按钮。

实践过程中发现，其实电梯运动这个功能可以省略，因为电梯运动是看不见的！嘿嘿。
电梯运动可以通过开门、关门，再在不同的楼层出现（开门、关门）来表达。
这样，电梯、按钮可以合并到一个背景里去。

先看看（一个）电梯的函数。
function drawElevator(startX, startY) {
w = 80;
h = 60; // head:body:leg = h:3h:5h
canvas = document.getElementById("testcanvas");
context = canvas.getContext('2d');
// context.clearRect(startX-1,startY-1,w+1,h+1);
context.beginPath();
context.strokeRect(startX, startY, w, h);
context.moveTo(startX+w+5, startY+28);
context.lineTo(startX+w+15,startY+28);
context.lineTo(startX+w+10,startY+18);
context.lineTo(startX+w+5,startY+28);
context.moveTo(startX+w+5, startY+32);
context.lineTo(startX+w+15,startY+32);
context.lineTo(startX+w+10,startY+42);
context.lineTo(startX+w+5,startY+32);
context.fill();
drawDoor(startX+5,startY+5);
}

这里电梯实际上已经被简化成了一个方框，在这个方框里画了一扇紧闭的门，就象我们通常见到的那样，在电梯的右侧画了两个三角形，表示按钮。
注意，这里电梯已经变成了静态背景，我们不再需要clearRect了。

再看看电梯门的函数：
function drawDoor(startX, startY) {
w = 70;
h = 50;
if ( doorGap<0 ) doorGap=0;
if ( doorGap>w ) doorGap = w;
canvas = document.getElementById("testcanvas");
context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = "#ccc";
context.strokeStyle="#000";
context.fillRect(startX, startY,w,h);
context.strokeRect(startX, startY, w, h);
if ( doorGap==0 )
{
context.moveTo(startX+w/2, startY);
context.lineTo(startX+w/2, startY+h);
context.stroke();
}
else
{
context.fillStyle = "#fff";
context.fillRect(startX+w/2-doorGap/2, startY,doorGap,h);
context.strokeRect(startX+w/2-doorGap/2, startY,doorGap,h);
}
}

电梯门先画一个方框，再在中间填充深灰色。当电梯门紧闭的时候，画一条线就好；当电梯门打开的时候，中间画一个白方框。（白色方框越大，则灰色的方框越小，表示电梯门开得越大。）

让我们测试下看看实际效果：

嗯，看起来还不错。
测试代码如下：
drawElevator(100,10);
drawHuman(200,10,0.13);
doorGap = 50;
drawDoor(105,15);
这里我们把人的拉伸系数调成了0.13。明天我们会继续微调下，比如调成0.125什么的。

好～～～～ 再见。

总链接： ［技术水］零基础学HTML5，目标：做个网页版的围棋App
( https://tieba.baidu.com/p/4446488002 )