html5 canvas立体图片展示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5 canvas立体图片展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 canvas立体图片展示特效</title>
<script type="text/javascript" src="js/clay.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<style type="text/css">
* {
	font-family:arial;
	font-size:11px;
}
h1 {
	color:red;
	font-size:150%;
}
.canvas3D {
	background:#f0f0f0;
	width:640px;
	height:480px;
	border:3px solid gray;
}
#photos {
	display:none;
}
</style>
</head>

<body>
<center>
<div id="canvas"> </div>
<div id="photos">
<script src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=10&display=random&size=m&layout=x&source=all_tag&tag=lbhomepage&user=76007934%40N00"></script>
</div>
</center>
</body>
</html>

JS代码(zzsc.js):

function DemoApp(){
	var stage = new Clay.Stage(640,480,document.getElementById("canvas"));
	var world = stage.getWorld();
	var camera = stage.getCamera();
	camera.set(0,0,800);
	camera.setTarget(Clay.Vector.ZERO);
	var light = new Clay.Light(-2,-2,1,3,.5);
	light.setColor(255,255,255)world.addLight(light);
	stage.resizeTo(640,480);
	var palet = [new Clay.Material(37,47,51,1,stage),new Clay.Material(65,92,79,1,stage),new Clay.Material(134,156,128,1,stage),new Clay.Material(147,194,204,1,stage),new Clay.Material(206,234,238,1,stage)];
	var rib = 256;
	var amount = 3;
	var offset = 266;
	function rand(range){
	return Math.floor(Math.random() * range);
}
;
	for (var i=0;
	i<amount;
	i++){
	for (var j=0;
	j<amount;
	j++){
	for (var k=0;
	k<amount;
	k++){
	var x = ((offset * i) - (offset * (amount-1))/2)*1.5,y = (offset * j) - (offset * (amount-1))/2,z = (offset * k) - (offset * (amount-1))/2;
	var m = palet[rand(palet.length)];
	var cube = new Clay.Cube(x,y,z,4,rib,rib,m);
	world.addShape(cube);
}
}
}
var flickr = [];
	var photos = document.getElementById("photos").getElementsByTagName("img");
	for(var i=0;
	i<photos.length;
	i++){
	var photo = photos[i];
	var parent = photo.parentNode;
	if(/^a$/i.test(parent.nodeName)){
	flickr.push(new Clay.Texture(photos[i].src,stage));
}
}
var cameraTarget = Clay.Vector.ZERO;
	var t = 0,radius = 1200,slowMo = new Clay.Vector(20,20,20);
	stage.addEvent('click',function(e){
	var poly = e.targetPolygon;
	var shape = e.targetShape;
	var rand = Math.floor(Math.random()*flickr.length);
	if(poly && shape){
	poly.setMaterial(flickr[rand]);
	cameraTarget = shape;
}
}
);
	stage.addEvent('enterframe',function(){
	t += 0.01;
	var dif = cameraTarget.subtract(camera.target).divide(slowMo);
	camera.setTarget(camera.target.add(dif))var position = new Clay.Vector(cameraTarget.x + (Math.sin(t) * radius),cameraTarget.y + (Math.cos(t) * radius/2),cameraTarget.z + (Math.cos(t) * radius));
	var move = position.subtract(camera).divide(slowMo);
	camera.moveBy(move);
}
);
	var lbi = new Image();
	lbi.src = 'static/images/lostboys.png';
	stage.addEvent('postrender',function(renderer){
	try{
	renderer.context.drawImage(lbi,10,430);
}
catch (e){
}
}
);
	// run forest run!stage.run()}
// initwindow.addEventListener('load',function(){
	new DemoApp();
}
,false);

附件:下载该文件资源,减少时间成本(增值服务)