html5 canvas超逼真3d动画场景

简要教程

这是一个使用Html5 canvas制作的相当真实的3d动画场景效果。canvas由js在运行时动态生成。

HTML

<divclass="wrapper">  
    <divclass="context"></div>
    <h1>Look around by dragging and holding the mouse button</h1>  
</div>
<divid="gui"></div>

生成canvas的javascript代码：

varcanvas = document.createElement('canvas');
canvas.setAttribute('width','420');
canvas.setAttribute('height','380');
canvas.setAttribute('id','canvas');
varcanvasWidth = canvas.width = canvas.getAttribute('width');
varcanvasHeight = canvas.height = canvas.getAttribute('height');
varmainContext = document.getElementsByClassName('context')[0];
mainContext.appendChild(canvas);

其它代码请参考下载文件。