Skip to content

Commit 4bec4b0

Browse files
MooreLxrMooreLxr
committed
新增 文件
0 parents  commit 4bec4b0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1460
-0
lines changed

‎README.md

Whitespace-only changes.

‎canvas-clock/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
绘制时钟思路解析：
2+
3+
1.绘制时针：原理如图一
4+
ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 *(min/60) - 1/2 * Math.PI)
5+
6+
现在我画完了时针，然后我想画分针，x轴已经在我画时针的时候偏转了，这时候肯定要让x轴恢复到原来的模样，我们才能继续画分针，否则画出来的分针是不准的。这时候save和restore就派上用场了,如图二
7+
8+
2.绘制分针，秒针，原理和时针一样，比例不同（时针一圈是12个刻度，分针是60个刻度）

‎canvas-clock/clock.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>时钟</title>
8+
<script src="./js/jquery-1.4.2.min.js"></script>
9+
<style>
10+
html{
11+
width: 100%;
12+
height: 100%;
13+
}
14+
body{
15+
width: 100%;
16+
height: 100%;
17+
margin: 0;
18+
padding: 0;
19+
text-align: center;
20+
}
21+
.canvas {
22+
margin-top: 100px;
23+
border: 1px solid #ddd;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<canvas id="canvasDOM" class="canvas"></canvas>
29+
30+
<script src="./clock.js"></script>
31+
</body>
32+
</html>

‎canvas-clock/clock.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
let ctx
2+
$(function() {
3+
let canvas = $('#canvasDOM')[0]
4+
ctx = canvas.getContext('2d')
5+
canvas.width = 600
6+
canvas.height = 600
7+
8+
9+
setInterval(() => {
10+
draw()
11+
}, 1000)
12+
draw()
13+
})
14+
15+
function draw () {
16+
ctx.save()
17+
18+
ctx.clearRect(0, 0, 600, 600)
19+
ctx.translate(300,300)
20+
ctx.save() // -------------保存初始状态
21+
22+
// 绘制表心，表框
23+
ctx.beginPath()
24+
ctx.arc(0, 0, 5, 0, 2 * Math.PI)
25+
ctx.fill()
26+
ctx.closePath()
27+
ctx.beginPath()
28+
ctx.arc(0, 0, 200, 0, 2 * Math.PI)
29+
ctx.stroke()
30+
ctx.closePath()
31+
32+
let now = new Date(),
33+
hour = now.getHours() % 12,
34+
min = now.getMinutes(),
35+
sec = now.getSeconds()
36+
37+
// 绘制时针
38+
ctx.lineWidth = 10
39+
ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 *(min/60) - 1/2 * Math.PI) // 原理如图①
40+
ctx.moveTo(0, 0)
41+
ctx.lineTo(100, 0)
42+
ctx.stroke()
43+
ctx.restore() // -----------恢复上一次保存的状态
44+
ctx.save() // --------------保存当前状态
45+
46+
// 绘制分针
47+
ctx.lineWidth = 5
48+
ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 *(sec/60) - 1/2 * Math.PI) // 原理和时针一样，比例不同（时针一圈是12个刻度，分针是60个刻度）
49+
ctx.moveTo(0, 0)
50+
ctx.lineTo(130, 0)
51+
ctx.stroke()
52+
ctx.restore() // ------------恢复上一次保存的状态
53+
ctx.save() // ---------------保存当前状态
54+
55+
// 绘制秒针
56+
ctx.lineWidth = 1
57+
ctx.rotate(2 * Math.PI / 60 * sec - 1/2 * Math.PI) // 原理和时针一样，比例不同（时针一圈是12个刻度，分针是60个刻度）
58+
ctx.moveTo(0, 0)
59+
ctx.lineTo(160, 0)
60+
ctx.stroke()
61+
ctx.restore() // ---------------恢复上一次保存的状态
62+
ctx.save() // ------------------保存当前状态
63+
64+
// 绘制刻度
65+
ctx.lineWidth = 5
66+
for (let i=0;i< 12; i++) {
67+
ctx.rotate(2 * Math.PI / 12)
68+
ctx.moveTo(180, 0)
69+
ctx.lineTo(200, 0)
70+
ctx.stroke()
71+
// 文字
72+
ctx.font = '16px 微软雅黑 bold'
73+
ctx.fillText(i<=8 ? i+4 : i-8, 160, 0)
74+
}
75+
ctx.restore()
76+
ctx.save()
77+
78+
ctx.lineWidth = 1
79+
for (let i=0; i< 60; i++) {
80+
ctx.rotate(2 * Math.PI / 60)
81+
ctx.moveTo(190, 0)
82+
ctx.lineTo(200, 0)
83+
ctx.stroke()
84+
}
85+
ctx.restore()
86+
87+
ctx.restore()
88+
}

‎canvas-clock/images/图1.jpg

805 KB
Loading

‎canvas-clock/images/图2.png

51.9 KB
Loading

‎canvas-clock/js/jquery-1.4.2.min.js

+154
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎canvas-clock/scratch-card.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>canvas实现刮刮乐</title>
8+
<style>
9+
.card{
10+
width: 400px;
11+
height: 100px;
12+
text-align: center;
13+
line-height: 100px;
14+
position: absolute;
15+
left: 0;
16+
top: 0;
17+
z-index: -1;
18+
font-weight: bold;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div class="card">猜猜我是谁？</div>
24+
<canvas id="canvasDOM" width="400" height="100"></canvas>
25+
26+
<script src="./scratch-card.js"></script>
27+
</body>
28+
</html>

‎canvas-clock/scratch-card.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
window.onload = function () {
2+
const canvas = document.getElementById('canvasDOM')
3+
const ctx = canvas.getContext('2d')
4+
5+
ctx.fillStyle = 'darkgray'
6+
ctx.fillRect(0, 0, 400, 100)
7+
ctx.fillStyle = '#fff'
8+
ctx.font = "22px '微软雅黑'"
9+
ctx.textAlign = 'center'
10+
// 绘制填充文字
11+
ctx.fillText('刮刮卡', 190, 50)
12+
13+
let isDraw = false
14+
canvas.onmousedown = function () {
15+
isDraw = true
16+
}
17+
canvas.onmousemove = function (e) {
18+
if (!isDraw) return
19+
const x = e.pageX - canvas.offsetLeft
20+
const y = e.pageY - canvas.offsetTop
21+
ctx.globalCompositeOperation = 'destination-out'
22+
ctx.arc(x, y, 10, 0, 2 * Math.PI)
23+
ctx.fill()
24+
}
25+
canvas.onmouseup = function () {
26+
isDraw = false
27+
}
28+
}

‎fishgame/index.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style type="text/css">
7+
body{
8+
padding: 10px;
9+
}
10+
.allbg{
11+
width: 800px;
12+
height: 600px;
13+
margin: 0 auto;
14+
}
15+
.canvasGroup{
16+
width: 800px;
17+
height: 600px;
18+
position: relative;
19+
}
20+
/*把两个canvas重叠在一起*/
21+
#canvas1{
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
z-index: 1;
26+
}
27+
#canvas2{
28+
position: absolute;
29+
top: 0;
30+
left: 0;
31+
z-index: 0;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<div class="allbg">
37+
<div class="canvasGroup">
38+
<canvas id="canvas1" width="800" height="600"></canvas>
39+
<canvas id="canvas2" width="800" height="600"></canvas>
40+
</div>
41+
</div>
42+
<script src="./js/main.js"></script>
43+
<script src="./js/commonFunctions.js"></script>
44+
<script src="./js/setBg.js"></script>
45+
<script src="./js/ane.js"></script>
46+
<script src="./js/fruit.js"></script>
47+
<script src="./js/fishMom.js"></script>
48+
<script src="./js/collision.js"></script>
49+
<script src="./js/babyFish.js"></script>
50+
<script src="./js/data.js"></script>
51+
<script src="./js/dust.js"></script>
52+
</body>
53+
</html>

‎fishgame/js/ane.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Created by Administrator on 2017/6/30.
3+
*/
4+
function AneObj () {
5+
this.rootx = [];/*存放海葵位置变量*/
6+
this.headx = [];/*存放海葵的不同高度*/
7+
this.heady = [];
8+
this.alpha = 0;
9+
this.amp = [];
10+
}
11+
AneObj.prototype.num = 50;
12+
AneObj.prototype.init = function () {
13+
for(var i = 0;i<this.num;i++){
14+
this.rootx[i] = i*16 + Math.random()*20;//海葵根部x坐标
15+
this.headx[i] = this.rootx[i];
16+
this.heady[i] = canHeight-220 + Math.random()*40;
17+
this.amp [i] = Math.random()*50+50;//摆动幅度
18+
}
19+
}
20+
AneObj.prototype.draw = function () {
21+
this.alpha += delTime*0.0008;//控制摆动的速度
22+
var l = Math.sin(this.alpha);
23+
ctx2.save();
24+
ctx2.globalAlpha = 0.6;/*设置透明度*/
25+
ctx2.lineWidth = 20;
26+
ctx2.lineCap = "round";
27+
ctx2.strokeStyle = "#3b154e";
28+
for(var i = 0;i<this.num;i++){
29+
ctx2.beginPath();
30+
ctx2.moveTo(this.rootx[i],canHeight);
31+
this.headx[i] = this.rootx[i]+l * this.amp[i]
32+
ctx2.quadraticCurveTo(this.rootx[i],canHeight-100,this.headx[i],this.heady[i]);
33+
ctx2.stroke();
34+
}
35+
ctx2.restore();
36+
}

‎fishgame/js/babyFish.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/**
2+
* Created by Administrator on 2017/6/30.
3+
*/
4+
var BabyFishObj = function () {
5+
this.x = '';
6+
this.y = '';
7+
this.angle = '';
8+
9+
this.babyToilTimer = 0;//设置定时器，指定时间时更换刷新鱼尾巴
10+
this.babyToilCount = 0;//进入哪一张鱼尾巴图片
11+
this.babyEyeTimer = 0;//
12+
this.babyEyeCount = 0;//
13+
this.babyEyeInterval = 1000;//当前图片持续的时间
14+
this.babyBodyTimer = 0;
15+
this.babyBodyCount = 0;
16+
17+
}
18+
BabyFishObj.prototype.init = function() {
19+
//定义小鱼的位置，初始时候在画布中间，与鱼妈妈间隔50px的距离
20+
this.x = canWidth/2-30;
21+
this.y = canHeight/2+30;
22+
this.angle = 0;
23+
}
24+
BabyFishObj.prototype.draw = function() {
25+
/*小鱼随着大鱼游动*/
26+
this.x = lerpDistance(fishMom.x,this.x,0.98);/*0.98是移动的速度*/
27+
this.y = lerpDistance(fishMom.y,this.y,0.98);/*0.98是移动的速度*/
28+
/*角度差Math.atan2(y,x)*/
29+
var deltaY = fishMom.y-this.y;/*高度差为鼠标的高度-当前鱼的高度*/
30+
var deltaX = fishMom.x-this.x;
31+
var bata = Math.atan2(deltaY,deltaX);
32+
//lerpAngle(aim,cur,radio)，使当前角度不断趋近了bata
33+
this.angle = lerpAngle(bata,this.angle,0.6);
34+
35+
//定时刷新鱼尾巴
36+
this.babyToilTimer += delTime;
37+
if(this.babyToilTimer > 50){/*时间到，则切换下一张鱼尾巴图片*/
38+
this.babyToilCount = (this.babyToilCount+1)%8;//使得每次图片都是在babyTail0~7间循环
39+
this.babyToilTimer %= 50;//时间复原复原
40+
}
41+
//定时刷新鱼眼睛
42+
this.babyEyeTimer += delTime;
43+
if(this.babyEyeTimer > this.babyEyeInterval){
44+
this.babyEyeCount = (this.babyEyeCount+1)%2;/*为了使它在0~1循环*/
45+
this.babyEyeTimer %= this.babyEyeInterval;//把定时器归零
46+
47+
//设置睁着眼睛的时间比闭着眼睛的时间长
48+
if(this.babyEyeCount == 0){//睁着眼睛时
49+
this.babyEyeInterval = Math.random() *1500 + 2000;
50+
}
51+
else{
52+
this.babyEyeInterval = 200;
53+
}
54+
}
55+
//定时刷新小鱼身体
56+
this.babyBodyTimer += delTime;
57+
if(this.babyBodyTimer > 400){
58+
this.babyBodyCount = this.babyBodyCount + 1;
59+
this.babyBodyTimer %= 400;//把定时器归零
60+
if(this.babyBodyCount > 19){
61+
this.babyBodyCount = 19;//此时小鱼身体完全变白
62+
//游戏结束
63+
data.gameOver = true;
64+
}
65+
}
66+
67+
ctx1.save();
68+
ctx1.translate(this.x,this.y);
69+
ctx1.rotate(this.angle);
70+
71+
var babyTailCount = this.babyToilCount;
72+
var babyEyeCount = this.babyEyeCount;
73+
var babyBodyCount = this.babyBodyCount;
74+
ctx1.drawImage(babyTail[babyTailCount],-babyTail[babyTailCount].width/2+23,-babyTail[babyTailCount].height/2);
75+
ctx1.drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount].width/2,-babyBody[babyBodyCount].height/2);
76+
ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width/2,-babyEye[babyEyeCount].height/2);
77+
ctx1.restore();
78+
79+
80+
}

0 commit comments

Comments
 (0)