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); 其它代码请参考下载文件。 |