画简单的图形
你也许看到很多html5很炫的动画，自己也很想写一个，这个需要一步一步的积累，一步一步的学，不能着急，很高兴终于改用fps的方式画图了，静态的学地差不多了，呵呵，下面是一个简单的图形代码，每秒执行60次，每次圆移动3个像素记录下圆形的轨迹碰到临界点就改变方向很简单直接上源码，又有这个程序依赖canvas库，自己也可以开发一个，很简单的库，把一些常用的canvas功能做简单的封装就ok了。这个得方式很好记录了我的学习过程，~_~ 高兴呵呵
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="lib/canvas/canvas-1.2.dev.js">
</script>
<title>测试Canvas 方法</title>
</head>
<body style="padding:0 0 0 0; margin:0 0 0 0;">
<div style="width:100%;height:100%; padding:0 0 0 0; margin:0 0 0 0; font-size:50px;">
<canvas style="background-color:#ffffff; width:500px; height:400px; padding:0 0 0 0; margin:0 0 0 0;"id="ctMs">
</canvas>
</div>
<script type="text/javascript">
var cvs = Canvas("ctMs", 0);
var i = 0;
cvs.clear();
cvs.fillStyle('rgba(0, 0, 255, 0.5)');
cvs.fillRect(150, 100, 100, 50); // ALIGN.LEFT.TOP is the default alignment
cvs.strokeStyle('#333333');
cvs.grid(40, 50);
var boss = {
x: 17,
y: 32,
isTr: false,
isTl: false
}
cvs.createLayer("sp", 100, function(){
if (boss.x >= 480) {
boss.isTr = true;
}
if (boss.x <= 0) {
boss.isTr = false;
}
if (boss.isTr) {
boss.x--;
}
else {
boss.x++;
}
if (boss.y >= 300) {
boss.isTl = true;
}
if (boss.y <= 1) {
boss.isTl = false;
}
if (boss.isTl) {
boss.y--;
}
else {
boss.y++;
}
//this.clear();
this.fillColor('#331555');
this.fillCircle(boss.x, boss.y, 15);
});
cvs.onKeyPress = function(keyCode, character, isCtrlPressed, isShiftPressed, isAltPressed){
switch (keyCode) {
case 97:
boss.x -= 3;
break;
case 119:
boss.y += 3;
break;
case 115:
boss.y -= 3;
break;
case 100:
boss.x += 3;
break;
}
}
</script>
</body>
</html>
奉上截图
