当前位置:主页 > 网页特效 > HTML5+CSS3 >

html5 canvas超逼真3d动画场景

发布时间:2019/05/06 来源:互联网 浏览: 关键词:HTML5 3D canvas 动画效果 
html5 canvas超逼真3d动画场景 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);

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

共有人阅读,期待你的评论!评论
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top