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

HTML

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

生成canvas的javascript代码：

var canvas = document.createElement('canvas');
canvas.setAttribute('width', '420');
canvas.setAttribute('height', '380');
canvas.setAttribute('id', 'canvas');
var canvasWidth = canvas.width = canvas.getAttribute('width');
var canvasHeight = canvas.height = canvas.getAttribute('height');
var mainContext = document.getElementsByClassName('context')[0];
mainContext.appendChild(canvas);
                

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

在线预览    源码下载