html5 canvas超逼真3d动画场景

当前位置:主页 > Html5库 > html5 canvas > html5 canvas超逼真3d动画场景
html5 canvas超逼真3d动画场景
分享:

    插件介绍

    这是一款效果非常逼真的html5 canvas 3d动画场景效果。3d动画场景中的canvas使用javascript动态生成,并使用css3对动画场景进行渲染。这个3d动画场景可以在场景的内部和顶部进行动画切换。

    浏览器兼容性

    浏览器兼容性
    时间:11-06
    阅读:

简要教程

这是一个使用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);
                

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