使用html5的canvas绘制3D的效果

我们知道,当我们获得上下文的对象的时候,我们是绘制的是canvas.getContext(“2d”);也就是说,我们现在只能使用2d在canvas里面绘制图画,尽管将来可能支持3d,但是现在我们就很期待!~

现在就是通过js的定时器来绘制3d的效果,其实只是平面的图形按照一定的变化,不断的显示,做出的效果。

输入代码:

(index.hmtl的)

——————————————————————————————————————————————————–

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>使用canvas绘制3D的效果</title>
<link rel=”stylesheet” type=”text/css” href=”./main.css”>
<script type=”text/javascript” src=”./main.js”></script>
</head>
<body>
<div>
<canvas id=”star_object” style=”border:1px solid black;” width=”500″ height=”500″>
<p>
Sorry, your browser don`t support Canvas in HTML5
</p></canvas>
</div>
</body>
</html>

————————————————————————————————————————

main.css

———————————————————————————————————————–

body{

background:#eee;margin:0;padding:0

}
.example{

background:#FFF;

width:500px;

border:1px #000 solid;

margin:20px auto;

padding:15px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px

}

————————————————————————————————————-

main.js

——————————————————————————————————————-

var iStarSize = 150;
var iCanvasWidth = 500;
var iCanvasHeight = 500;
var context, canvas;
var x, y;
var degrees = 0.0;
var dx, dy;

function run() {
degrees += 0.1;
if (x + dx > iStarSize/2 || x + dx < -iStarSize/2)
dx = -dx;
x += dx;

render();
}

function render() {
//清除原来的内容
context.clearRect(0, 0, iCanvasWidth, iCanvasWidth);

var g=context.createLinearGradient(0,0,400,400);
g.addColorStop(0,’rgba(0,0,255,0.5)’);
g.addColorStop(0.6,’rgba(0,20,0,0.5)’);
g.addColorStop(1,’rgba(255,0,0,0.5)’);
context.save();
// 设置初始化的位置
context.translate( iStarSize * 1.5, iStarSize * 1.5 );

// 设置相关的样式
context.fillStyle = g;//填充样式
context.strokeStyle = ‘#000′;//描边的样式
context.lineWidth = 2; //线的粗细

// 开始绘边
context.beginPath();

//你可以取消它通过一个默认的反转
//context.rotate(degrees);

// 这是绘制3d的星
context.moveTo( 0, -iStarSize );
context.lineTo( iStarSize / 10 – x / 5, – iStarSize / 5 );
context.lineTo( iStarSize / 2 – x, 0 );
context.lineTo( iStarSize / 10 – x / 5, iStarSize / 5 );
context.lineTo( 0, iStarSize );
context.lineTo( -iStarSize / 10 + x / 5, iStarSize / 5 );
context.lineTo( -iStarSize / 2 + x, 0 );
context.lineTo( -iStarSize / 10 + x / 5, – iStarSize / 5 );
context.lineTo( 0, -iStarSize );

//给对象添加阴影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = ‘rgba(180, 180, 180, 0.8)’;

//开始填充和描边
context.fill();
context.stroke();
context.closePath();

context.restore();

// 输入调试信息
context.font = ’12px Verdana’;
context.fillStyle =g;
context.fillText(‘x: ‘ + x + ‘; y: ‘ + y, 10, 15);
context.fillText(‘dx: ‘ + dx + ‘; dy: ‘ + dy, 10, 30);
}

window.onload = function(){
canvas = document.getElementById(‘star_object’);

// set size of our canvas area
canvas.width = iCanvasWidth;
canvas.height = iCanvasWidth;

context = canvas.getContext(’2d’);

// 初始化内部的变量
x = y = 1;
dx = dy = 4;
//设置定时器,执行
setInterval(run, 20);
};

——————————————————————————————————————-

效果截图:

 

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/index.htm

 

 

 

共有 0 条评论

Top