返回canvas,......登陆

canvas,制作炫酷的时钟和倒计时

高洛峰2016-11-05 14:34:54708

html部分

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

<!DOCTYPE html>

<!--下面三个百分比都是为了实现后期项目优化的时候,实现自适应屏幕的宽度和高度-->

<html style="height: 100%;">

<!--这个需要HTML标签上也得加上style="height:100%"才行,要不然会显示一半,经常用CSS的都知道,BODY 想高度100%,外标签HTML也得设置100%-->

  

<head>

<meta charset="UTF-8">

<title></title>

  

</head>

  

<body style="height: 100%;">

<canvas id="canvas" style="height: 100%;"></canvas>

<script type="text/javascript" src="js/digit.js"></script>

<script type="text/javascript" src="js/countdown9.js"></script>

  

</body>

  

</html>

  

  

digit.js部分

digit =

    [

        [

            [0,0,1,1,1,0,0],

            [0,1,1,0,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,0,1,1,0],

            [0,0,1,1,1,0,0]

        ],//0

        [

            [0,0,0,1,1,0,0],

            [0,1,1,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [1,1,1,1,1,1,1]

        ],//1

        [

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,0,1,1,0,0,0],

            [0,1,1,0,0,0,0],

            [1,1,0,0,0,0,0],

            [1,1,0,0,0,1,1],

            [1,1,1,1,1,1,1]

        ],//2

        [

            [1,1,1,1,1,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,0,1,1,1,0,0],

            [0,0,0,0,1,1,0],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//3

        [

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,1,0],

            [0,0,1,1,1,1,0],

            [0,1,1,0,1,1,0],

            [1,1,0,0,1,1,0],

            [1,1,1,1,1,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,0,1,1,0],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,1,1]

        ],//4

        [

            [1,1,1,1,1,1,1],

            [1,1,0,0,0,0,0],

            [1,1,0,0,0,0,0],

            [1,1,1,1,1,1,0],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//5

        [

            [0,0,0,0,1,1,0],

            [0,0,1,1,0,0,0],

            [0,1,1,0,0,0,0],

            [1,1,0,0,0,0,0],

            [1,1,0,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//6

        [

            [1,1,1,1,1,1,1],

            [1,1,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,0,0,1,1,0,0],

            [0,0,1,1,0,0,0],

            [0,0,1,1,0,0,0],

            [0,0,1,1,0,0,0],

            [0,0,1,1,0,0,0]

        ],//7

        [

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,1,1,0]

        ],//8

        [

            [0,1,1,1,1,1,0],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [1,1,0,0,0,1,1],

            [0,1,1,1,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,0,1,1],

            [0,0,0,0,1,1,0],

            [0,0,0,1,1,0,0],

            [0,1,1,0,0,0,0]

        ],//9

        [

            [0,0,0,0],

            [0,0,0,0],

            [0,1,1,0],

            [0,1,1,0],

            [0,0,0,0],

            [0,0,0,0],

            [0,1,1,0],

            [0,1,1,0],

            [0,0,0,0],

            [0,0,0,0]

        ]//:

    ];

  

  

  

countdown9.js部分

  

  

var WINDOW_WIDTH = 1024;

  

var WINDOW_HEIGHT = 768;

  

var RADIUS = 8; //定义小球的半径

  

var MARGIN_TOP = 60; //每个数字距离画布的上边距的距离

  

var MARGIN_LEFT = 30; //第一个数字距离画布的左边距的距离

  

  

  

//定制截止时间(月是从0开始数一直到11)

  

//var endTime = new Date();//(2017,11,23,23,12,52)如果在这个括号里面填上数字,前面的var改成const就是填写的时间到当前时间的差的倒计时,最多只能有99个小时,

  

//endTime.setTime( endTime.getTime()+3600*1000);//这种算法可以保证每次打开时都是倒计时一小时(1小时=60分钟=3600秒=3600*1000毫秒)

  

//小时的位置只有两位数,一天有24个小时,最多只能倒计时四天,

  

//如果需要打破这个限制,可以把小时扩充成三位数,甚至增加

  

  

  

//因为倒计时每一秒的变化,要加上动画的效果,动画的效果要不停的和当前的时间

  

//做一个比较,为此设计一个全局变量来表示现在倒计时需要有多少秒,毫秒在计算中

  

//要转换成秒,毫秒的细节是不需要的。

  

var curShowTimeSeconds = 0; //初始化

  

  

  

//为了储存生成的小球,要设一个数据结构,

  

var balls = []; //初始化一个空的数组,一旦产生新的小球,就添加在数组里面

  

  

  

//小球是彩色的,需要一个储存颜色的数组

  

const colors = ["red", "yellow", "lime", "purple", "deeppink",

  

"springgreen", "blue", "green", "tomato", "turquoise"

  

]

  

  

  

window.onload = function() {

  

//实现屏幕的自适应

  

WINDOW_WIDTH = document.body.clientWidth;

  

WINDOW_HEIGHT = document.body.clientHeight;

  

  

  

MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);

  

RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;

  

MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);

  

  

  

var canvas = document.getElementById('canvas');

  

var context = canvas.getContext("2d");

  

  

  

//这种方式调用宽高,有两个好处

  

//第一屏幕的大小改变起来非常的方便

  

//第二个后续在做屏幕的自适应的时候,只需要计算两个变量的值,非常的方便

  

canvas.width = WINDOW_WIDTH;

  

canvas.height = WINDOW_HEIGHT;

  

//调用render函数,传入context参数,获得绘图的上下文环境

  

  

  

curShowTimeSeconds = getCurrentShowTimeSeconds();

  

setInterval(function() {

  

render(context); //绘制当前的画面

  

update(); //根据绘制画面所需要的数据结构,对数据结构进行一定的调整

  

}, 50);

  

  

  

}

  

  

  

function getCurrentShowTimeSeconds() {

  

var curTime = new Date(); //获取当前的时间

  

  

  

  

  

var ret = curTime.getHours()*3600+ curTime.getMinutes()*60+curTime.getSeconds();

  

  

  

return ret ; 

  

}

  

  

  

//对当前的数据进行调整,处理时间的变化

  

function update() {

  

//下一次要显示的时间

  

var nextShowTimeSeconds = getCurrentShowTimeSeconds();

  

var nextHours = parseInt(nextShowTimeSeconds / 3600);

  

var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);

  

var nextSeconds = nextShowTimeSeconds % 60;

  

  

  

var curHours = parseInt(curShowTimeSeconds / 3600);

  

var curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60);

  

var curSeconds = curShowTimeSeconds % 60;

  

  

  

//判断下一次要显示的时间和当前所显示的时间有没有变化,

  

//如果有变化,就改变curShowTimeSeconds

  

if(nextSeconds != curSeconds) {

  

//如果当前的小时的十位数已经不等于下一次要显示的小时的十位数

  

if(parseInt(curHours / 10) != parseInt(nextHours / 10)) {

  

//创建一个新的函数addBalls负责加小球,找到小球的位置,以及相应的数字,生成一系列小球

  

addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours / 10));

  

}

  

//创建小球的一系列操作

  

//对小时的个位数的操作

  

if(parseInt(curHours % 10) != parseInt(nextHours % 10)) {

  

addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));

  

}

  

//对时间的分钟的十位数的操作

  

if(parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {

  

addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));

  

}

  

//对时间的分钟的个位数的操作

  

if(parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {

  

addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));

  

}

  

//对时间的秒钟的十位数的操作

  

if(parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {

  

addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));

  

}

  

//对时间的秒钟的个位数的操作

  

if(parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {

  

addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds % 10));

  

}

  

  

  

curShowTimeSeconds = nextShowTimeSeconds;

  

}

  

  

  

updateBalls();

  

//数组的元素在不断的增加,但是没有减小,这样的程序是不能长时间运行的,

  

//每个计算机都有它的极限,,他在不断的占有我们的内存,其实当balls走出我们的画面的时候

  

//这个小球就可以不留在数组里了,设置一个机制,删除走出画面的数组,这个程序就可以长时间运行了

  

// console.log(balls.length);//打印balls数组的长度

  

  

  

}

  

//让新产生的小球动起来

  

function updateBalls() {

  

for(var i = 0; i < balls.length; i++) {

  

balls[i].x += balls[i].vx;

  

balls[i].y += balls[i].vy;

  

balls[i].vy += balls[i].g;

  

  

  

if(balls[i].y >= WINDOW_HEIGHT - RADIUS) {

  

balls[i].y = WINDOW_HEIGHT - RADIUS;

  

balls[i].vy = -balls[i].vy * 0.75;

  

}

  

  

  

}

  

  

  

//设置一个机制,删除走出画面的数组,保证这个程序可以长时间运行

  

var cnt = 0;

  

for(var i = 0; i < balls.length; i++) //遍历balls数组

  

if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) //判断小球是否还在画面内

  

balls[cnt++] = balls[i]; //保留留在画面的小球

  

  

  

//删除不需要的小球

  

while(balls.length > Math.min(300, cnt)) {

  

balls.pop();

  

}

  

  

  

}

  

  

  

//实现addBalls()

  

function addBalls(x, y, num) {

  

for(var i = 0; i < digit[num].length; i++)

  

for(var j = 0; j < digit[num][i].length; j++)

  

if(digit[num][i][j] == 1) { //如果为1,就添加一个小球

  

var aBall = {

  

x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1), //x坐标

  

y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1), //y坐标

  

g: 1.5 + Math.random(), //小球的加速度,设置随机的加速度会使小球更加的活泼

  

vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //小球在x方向的速度

  

vy: -5, //y方向的速度

  

color: colors[Math.floor(Math.random() * colors.length)]

  

  

  

}

  

balls.push(aBall);

  

}

  

}

  

  

  

//绘制canvas的画布

  

function render(cxt) {

  

//对一个矩形的图像进行刷新操作

  

cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

  

//先绘制时钟的数值

  

var hours = parseInt(curShowTimeSeconds / 3600);

  

var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);

  

var seconds = curShowTimeSeconds % 60;

  

//一个数字一个数字的绘制时间

  

renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)

  

//15=7*2+1

  

renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)

  

//30=15+15

  

renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)

  

//39=30+(4*2+1)

  

renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);

  

renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);

  

renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);

  

renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);

  

renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);

  

  

  

//处理新生小球的绘制

  

for(var i = 0; i < balls.length; i++) {

  

cxt.fillStyle = balls[i].color;

  

cxt.beginPath();

  

cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true);

  

cxt.closePath();

  

cxt.fill();

  

}

  

  

  

}

  

  

  

function renderDigit(x, y, num, cxt) {

  

  

  

cxt.fillStyle = "rgb(0,102,153)"; //设置颜色

  

  

  

for(var i = 0; i < digit[num].length; i++)

  

for(var j = 0; j < digit[num][i].length; j++)

  

if(digit[num][i][j] == 1) {

  

cxt.beginPath();

  

  

  

//计算第(i,j)个圆的圆心的位置:

  

//(假设开始点是x,y,圆的半径是R,两个圆之间的外边距是2)

  

//centerX:x+j*2*(R+1)+(R+1);

  

//centerY:y+i*2*(R+1)+(R+1);

  

cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)

  

cxt.closePath()

  

  

  

cxt.fill()

  

}

  

}

 

精心整理的学习笔记,希望对大家可以有所帮助额。如果对您有所帮助,请帮忙顶顶额。


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送