一，canvas简介
1，我们说canvas，是一个html5的一种元素，通过使用javascript，可用于绘制图形，动画，图表，照片构图，或在飞行的任何其他可视化对象。
2，支持的浏览器，
Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)
3，开始使用
<canvas id="canvas1" width="600" height="600"><span>不支持canvas浏览器</span></canvas>
如果这里不定义widht和height默认是宽300，高150
，
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d'); //webgl : 3D绘图
，
//oGC.fillRect(50,50,100,100);//填充 oGC.strokeRect(50,50,100,100);//带边框的方块（这里会感觉到边框有两像素）换成下面的 （造成的原因：我们的画图跟在ps里面画图是一样的，我们从坐标为50，50处开始画图边框为1像素的方块，他从边框的1像素的中心处开始画，然后分成0.5。。计算机会自动给我填充成1像素。。所以看上去边框有两像素） oGC.strokeRect(50.5,50.5,100,100);
，
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.fillStyle = 'red';
oGC.strokeStyle = 'blue';
oGC.lineWidth = 10;
oGC.fillRect(50,50,100,100);
oGC.strokeRect(50.5,50.5,100,100);
这里有个顺序问题。
，
边界绘制
oGC.lineJoin = 'bevel';
，
oGC.beginPath();//开始 oGC.moveTo(100,100);//移动 oGC.lineTo(200,200);//线 oGC.lineTo(300,200);//另一个线 oGC.closePath();//闭合 oGC.stroke();
，
oGC.beginPath(); oGC.rect(100,100,100,100);//矩形 oGC.closePath(); oGC.fill(); oGC.clearRect(0,0,oC.width,oC.height);//删除一个画布的矩形区域的
，
oGC.save();//保存路径 oGC.fillStyle = 'red'; oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath(); oGC.fill(); oGC.restore();//恢复路径
，
鼠标画线
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oC.onmousedown = function(ev){
var ev = ev || window.event;
oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
document.onmousemove = function(ev){
var ev = ev || window.event;
oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
oGC.stroke();
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
，
方块运动
使用定时器来清除画布再次画
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
oGC.fillRect(0,0,100,100);
setInterval(function(){
num++;
oGC.clearRect(0,0,oC.width,oC.height);
oGC.fillRect(num,num,100,100);
},30);
};
</script>
，
画圆，弧度
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.moveTo(200,200);
//弧度 = 角度*Math.PI/180
oGC.arc(200,200,150,0,90*Math.PI/180,true);
oGC.stroke();
};
，
可以来画个时钟
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
function toDraw(){
var x = 200;
var y = 200;
var r = 150;
oGC.clearRect(0,0,oC.width,oC.height);
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSen = oDate.getSeconds();
var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
var oMinValue = (-90 + oMin*6) * Math.PI/180;
var oSenValue = (-90 + oSen*6) * Math.PI/180;
/*oGC.moveTo(x,y);
oGC.arc(x,y,r,0,6*Math.PI/180,false);
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/
oGC.beginPath();
for(var i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth = 3;
oGC.beginPath();
for(var i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth = 5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);
oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
};
</script>
，
绘制其他曲线
arcTo(x1,y1,x2,y2,r)
第一组坐标，第二组坐标，半径
quadraticCurveTo(dx,dy,x1,y1);
贝塞尔曲线，第一组控制点，第二组结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1);
贝塞尔曲线，第一组控制点，第二组控制点，第三组结束坐标
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
/*
oGC.moveTo(100,200);
oGC.arcTo(100,100,200,100,50);
oGC.stroke();
oGC.moveTo(100,200);
oGC.quadraticCurveTo(100,100,200,100);
oGC.stroke();*/
oGC.moveTo(100,200);
oGC.bezierCurveTo(100,100,200,200,200,100);
oGC.stroke();
};
</script>
，
变换
translate
偏移，从起点为基准点，移动当前坐标位置
rotate
旋转，参数为弧度
scale
缩放
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.translate(100,100);
oGC.rotate(20*Math.PI/180);
oGC.rotate(25*Math.PI/180);
oGC.scale(2,2);
oGC.fillRect(0,0,100,100);
};
</script>
，
移动加缩放的方块
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var num = 0;
var num2 = 0;
var value = 1;
setInterval(function(){
num++;
oGC.save();
oGC.clearRect(0,0,oC.width,oC.height);
oGC.translate(100,100);
if(num2 == 100){
value = -1;
}
else if(num2 == 0){
value = 1;
}
num2 += value;
oGC.scale( num2*1/50,num2*1/50 );
oGC.rotate(num*Math.PI/180);
oGC.translate(-50,-50);
oGC.fillRect(0,0,100,100);
oGC.restore();
},30);
};
</script>
这里未完待续，，，，，，，，，，，
二，使用canvas完成简易祖玛游戏直接上代码可以运行
<!DOCTYPE html>
<html>
<head>
<title>html5canvasZM</title>
</head>
<style>
body,html,div,p{margin: 0; padding:0 }
body{ background: #000}
#zm{ background: #fff; width: 600px; margin: 20px auto}
</style>
<body>
<div id="zm">
<canvas id="canvas1" width="600" height="600"></canvas>
</div>
<script>
window.onload = function(){
var oC = document.getElementById('canvas1');
var oGC = oC.getContext('2d');
var i = 0;
var yImg = new Image();
yImg.src = "images/person.png";
yImg.onload = function(){
setInterval(function(){
oGC.clearRect(0,0,oC.width,oC.height);
//画出大圆的四分之三
oGC.beginPath();
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);//弧度 = 角度*Math.PI/180
//oGC.closePath();
oGC.stroke();
//画出第二大园的二分之一
oGC.beginPath();
oGC.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
oGC.stroke();
//画出中间的小圆的全部
oGC.beginPath();
oGC.arc(400,200,20,0,360*Math.PI/180,false);
oGC.stroke();
for(var i=0; i<ball.length;i++){
//画出小黑球
oGC.beginPath();
oGC.moveTo(ball[i].x,ball[i].y);
oGC.arc(ball[i].x,ball[i].y,20,0,360*Math.PI/180,false);
oGC.fill();
}
//中间青蛙的位置
oGC.save();
oGC.translate(300,200);
oGC.rotate(iRotate);
oGC.translate(-40,-40);
oGC.drawImage(yImg,0,0);
oGC.restore();
for(var i=0;i<bullet.length;i++){
//打出的红球
oGC.save();
oGC.fillStyle = 'red';
oGC.beginPath();
oGC.moveTo(bullet[i].x,bullet[i].y);
oGC.arc(bullet[i].x,bullet[i].y,20,0*Math.PI/180,360*Math.PI/180,false);
oGC.fill();
oGC.restore();
}
//画出简易祖玛字样
oGC.save();
oGC.font = '60px impact';
oGC.textBaseline = 'top';
oGC.fillStyle = '#404143';
oGC.shadowOffsetX = 3;
oGC.shadowOffsetY = 3;
oGC.shadowColor = '#092253';
oGC.shadowBlur = 5;
var w = oGC.measureText('简易祖玛').width;
var h = 60;
oGC.fillText('简易祖玛', (oC.width - w)/2 , 450 );
oGC.restore();
},1000/60);
setInterval(function(){
for(var i=0; i<ball.length; i++){
ball[i].num ++;
if(ball[i].num == 270){
ball[i].r = 150;
ball[i].startX = 250;
ball[i].startY = 50;
}
if(ball[i].num == 270 + 180){
alert("游戏结束");
window.location.reload();
}
ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;
}
for(var i=0;i<bullet.length;i++){
bullet[i].x = bullet[i].x + bullet[i].sX;
bullet[i].y = bullet[i].y + bullet[i].sY;
}
for(var i=0;i<bullet.length;i++){
for(var j=0;j<ball.length;j++){
if( pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y) ){
bullet.splice(i,1);//碰撞后红球减掉
ball.splice(j,1);//碰撞后黑球减掉
break;
}
}
}
},30);
var ball = [];
setInterval(function(){
ball.push({
x : 300,
y : 0,
r : 200,
num :0,
startX : 300,
startY : 0
});
},350);
var iRotate = 0;
oC.onmousemove = function(ev){//鼠标移动祖玛的头的朝向
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
if(a>0 && b>0){
iRotate = Math.asin(b/c) + 90*Math.PI/180;
}
else if(a>0){
iRotate = Math.asin(a/c);
}
if(a<0 && b>0){
iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
}
else if(a<0){
iRotate = Math.asin(a/c);
}
};
var bullet = [];
oC.onmousedown = function(ev){//鼠标按下发出红色小球
var ev = ev || window.event;
var x = ev.clientX - oC.offsetLeft;
var y = ev.clientY - oC.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
var speed = 5;
var sX = speed * a/c;
var sY = speed * b/c;
bullet.push({
x : 300,
y : 200,
sX : sX,
sY : sY
});
}
}
//碰撞检测
function pz(x1,y1,x2,y2){
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt(a*a + b*b);
if(c < 40){
return true;
}
else{
return false;
}
}
}
</script>
</body>
</html>
相关推荐
数据结构与算法 c++实现 祖玛.cpp
要求用VC设计并实现一个简单的祖玛小游戏：游戏的主角是一只石青蛙，石青蛙会吐出各种颜色的珠子，珠子造型美丽，并且有着神秘的色彩，环绕着石青蛙的是载着珠子的轨道，各种颜色的珠子会沿着轨道往前滑动，石青蛙...
PSP 祖玛.iso
Unity 祖玛游戏源码
祖玛是一款java开发的小游戏，导入jar包后可以看到源码，仅供大家学习参考，请勿用于商业行为
Visual C# 的祖玛游戏，可以实现与以前的祖玛游戏相同的效果，看看吧！
自己课程设计写的祖玛小游戏的代码，想要学习祖玛小游戏的同学可以学习一下，代码可以完美运行，包含exe小程序
简单祖玛游戏源码
是我看到的祖玛源代码 希望对大家有帮助。
网友用XNA + SpriteX写的祖玛，以下是他的原话：多余的话就不说了，用 SpriteX + XNA 写的祖玛，一来算是对我学习XNA 2D部分和SpriteX的一个小结，另外一个是和大家相互交流，共同探讨游戏开发的编程技术。...
一个简单的祖玛核心引擎，用链表实现，支持向序列中加入一颗珠子并处理序列的变化。 使用方法： 先输入一个大写字母的连续序列（大写字母表示不同的颜色），再输入操作个数，然后再依次输入每个操作； 每个操作有两...
祖玛Flash游戏（附AS3源码）
Java游戏\埃及祖玛.jarJava游戏\埃及祖玛.jarJava游戏\埃及祖玛.jar
JAVA手机游戏 祖玛 完全免费软件下载免费！使用范围广泛，适用于具备java扩展功能的任何一款手机。
返回cad对象的祖玛 lisp程序 返回cad对象的祖玛 lisp程序 返回cad对象的祖玛 lisp程序 返回cad对象的祖玛 lisp程序
游戏采用D3D9-SDK开发，由于采用了最新的开发库，导致需要D3DX9_39.dll，里面的资源采自埃及祖玛1，2，3代。
祖玛 代码 tq2440上运行！ 大家可以试试看！ 祖玛代码！
关于c#的字符祖玛游戏源码，初始一个字符串，玩家在固定位置插入字符，如果有三个相同则消除，知道消除完毕游戏结束。
Flash祖玛游戏ActionScript 3.0源代码。
单机游戏 祖玛 源代码 大家可以下载 用as3.0编写的游戏