h5-10 canvas 简易祖玛
<!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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');//绘制canvas的画板
var i = 0;
oGC.beginPath(); //开始绘制路径
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);//圆形坐标，半径，弧度，
oGC.closePath();//结束绘制路径,起点终点相连接要写在stroke()之前。
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*Math.PI/180,360*Math.PI/180,false);
oGC.stroke(); setInterval(function(){
oGC.clearRect(0,0,oC.width,oC.height);//清空画布
oGC.beginPath();
oGC.arc(i++,i++,20,0*Math.PI/180,360*Math.PI/180,false);
oGC.stroke();
},30); };
</script>
</head> <body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d'); var i = 0; /*oGC.beginPath();
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
//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*Math.PI/180,360*Math.PI/180,false);
oGC.stroke();*/ setInterval(function(){ oGC.clearRect(0,0,oC.width,oC.height); oGC.beginPath();
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
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*Math.PI/180,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*Math.PI/180,360*Math.PI/180,false);
oGC.fill();
} },1000/60); setInterval(function(){ for(var i=0;i<ball.length;i++){
ball[i].num++;
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;
}
},30); var ball = [];//定义数组
ball[0] = {//数组是对象json.
x : 300,
y : 0,
r : 200,
num : 0,
startX : 300,
startY : 0
}; };
</script>
</head> <body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
var i = 0;
var yImg = new Image();
yImg.src = 'person.png';
yImg.onload = function(){
setInterval(function(){
oGC.clearRect(0,0,oC.width,oC.height);
oGC.beginPath();
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
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*Math.PI/180,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*Math.PI/180,360*Math.PI/180,false);
oGC.fill();
}*/ oGC.save();
oGC.translate(300,200);//平移，save()是为了防止translate()有坐标的累加。
oGC.rotate(iRotate);//旋转，参数是弧度
oGC.translate(-40,-40);
oGC.drawImage(yImg,0,0);
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;
}
},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);
}
};
};
};
</script>
</head> <body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:black;}
#div1{ background:white; width:600px; margin:20px auto;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d'); var i = 0; var yImg = new Image(); yImg.src = 'person.png'; yImg.onload = function(){ setInterval(function(){ oGC.clearRect(0,0,oC.width,oC.height); oGC.beginPath();
//弧度 = 角度 * Math.PI/180
oGC.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
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*Math.PI/180,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*Math.PI/180,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 = 'red';
oGC.shadowOffsetX = 10;
oGC.shadowOffsetY = 10;
oGC.shadowColor = 'green';
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>
</head> <body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>
h5-10 canvas 简易祖玛的更多相关文章
- 简易祖玛--canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html 5 cavans 简易祖玛
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- 关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
- 关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
- Windows下虚拟机安装Ubuntu15.10 Destop简易操作过程
一.前提环境: 1.vmware12.1,若您的系统是32位,请使用vmware10以下版本. 2.至少双核处理器,2G以上可用内存. 3.Ubuntu安装包(.iso后缀). 注:请尽量支持正版. ...
随机推荐
- 【java并发】（1）深入理解volatile关键字
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...
- Linux的那点事
1.重启nginx服务器 注意,修改了nginx配置文件后最好先检查一下修改过的配置文件是否正确,以免重启后Nginx出现错误影响服务器稳定运行. 判断Nginx配置是否正确命令如下: nginx - ...
- MYSQL 45道练习题
学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表(一)~表(四)所示.用S ...
- SQL Server 检测到基于一致性的逻辑 I/O 错误 pageid 不正确(应为 1:1772，但实际为 0:0)。在文件 'D:\Program Files\Microsoft SQL Ser
SQL Server 检测到基于一致性的逻辑 I/O 错误 pageid 不正确(应为 1:1772,但实际为 0:0).在文件 'D:\Program Files\Microsoft SQL Ser ...
- openMSP430之Custom linker script
The use of the -mmcu switch is of course NOT mandatory. It is simply a convenient way to use the pre ...
- 图像局部显著性—点特征（SURF）
1999年的SIFT(ICCV 1999,并改进发表于IJCV 2004,本文描述):参考描述:图像特征点描述. 参考原文:SURF特征提取分析 本文有大量删除,如有疑义,请参考原文. SURF对SI ...
- 重新理解 Monad
对于大多数刚刚入门函数式编程的同学来说,monad(单子.又叫单体)可能是这里面的一道坎.你可能对 map . flatMap 以及 filter 再熟悉不过,可是到了高阶的抽象层次上就又会变得一脸懵 ...
- http 请求头示例
POST /3-0/app/account/item HTTP/1.1 Host 10.100.138.32:8046 Content-Type application/json Accept-E ...
- Docker 数据卷重复挂载测试
没想到一年没写博客了,这中间都是记在自己的笔记本上,大部分网上都有,这个好像没有,所以发上来吧! 本文是测试Docker容器(相同目录/父子目录)同时挂载到宿主机(同目录/不同目录)时的情况,废话少说 ...
- apicloud iphoneX底部虚拟键盘遮挡
1.首先,底部的高不能写死. 2. var footer = $api.byId('footer'); $api.fixTabBar(footer);这句应该写在 footerHeight = $ap ...