html5制作星星闪烁和制作时钟

这次在w3和慕课网上学习html5制作了星星闪烁和时钟，期间也遇到了一些问题，比如getContext（）读不到数据，canvas不显示，好在通过百度还是查出来了，以下就是图片展示和代码：

1、星星闪烁图片展示

js代码：

var can;
var ctx;var w;
var h;var padLeft = 360;
var padTop = 100;var girlWidth = 600;
var girlHeight = 300;var deltaTime;
var lastTime;var girlPic = new Image();
var starPic = new Image();var stars = [];
var num = 60;var alive = 0;var switchy = false;window.requestAnimFrame = (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {return window.setTimeout(callback, 1000 / 60);};
})();function init() {can = document.getElementById("canvas");ctx = can.getContext("2d");w = can.width;h = can.height;document.addEventListener('mousemove', mousemove, false);girlPic.src = "girl.jpg";starPic.src = "star.png";for (var i = 0; i < num; i++) {stars[i] = new starObj();stars[i].init();}lastTime = Date.now();gameLoop();
}function gameLoop() {window.requestAnimFrame(gameLoop);var now = Date.now();deltaTime = now - lastTime;lastTime = now;fillCanvas();drawGirl();drawStars();aliveUpdate();
}function fillCanvas() {ctx.fillStyle = "#393550";ctx.fillRect(0, 0, w, h);
}function drawGirl() {ctx.drawImage(girlPic, padLeft, padTop, girlWidth, girlHeight);
}function mousemove(e) {if (e.offsetX || e.layerX) {var px = e.offsetX == undefined ? e.layerX : e.offsetX;var py = e.offsetY == undefined ? e.layerY : e.offsetY;if (px > padLeft && px < (padLeft + girlWidth) && py > padTop && py < (padTop + girlHeight)) {switchy = true;} else {switchy = false;}}
}

var starObj = function() {this.x;this.y;this.ySpd;this.picNo;this.timer;this.beta;
}starObj.prototype.init = function() {this.x = Math.random() * girlWidth + padLeft;this.y = Math.random() * girlHeight + padTop;this.ySpd = Math.random() * 0.6 - 0.3; //[0,2) [-1, 1)this.xSpd = Math.random() * 0.2 - 0.1; //[0,2) [-1, 1)this.picNo = Math.floor(Math.random() * 7);this.timer = 0;this.beta = Math.random() * Math.PI * 0.5;
}starObj.prototype.update = function() {this.xSpd = Math.random() * 0.2 - 0.1; //[0,2) [-1, 1)this.x += this.xSpd;this.y += this.ySpd;if (this.x > (padLeft + girlWidth) || this.x < (padLeft - 10))this.init();else if (this.y > (padTop + girlHeight) || this.y < (padTop - 10))this.init();this.timer += deltaTime;if (this.timer > 30) {this.picNo += 1;this.picNo %= 7;this.timer = 0;}
}starObj.prototype.draw = function() {this.beta += deltaTime * 0.005;ctx.save();ctx.globalAlpha = Math.sin(this.beta) * alive;console.log(alive);console.log(ctx.globalAlpha);ctx.drawImage(starPic, this.picNo * 7, 0, 7, 7, this.x, this.y, 7, 7);ctx.restore();
}function drawStars() {for (var i = 0; i < num; i++) {stars[i].update();stars[i].draw();}
}function aliveUpdate() {if (switchy) {alive += 0.03;if (alive > 0.7) {alive = 0.7;}} else {alive -= 0.03;if (alive < 0) {alive = 0;}}
}

html代码：

<!DOCTYPE HTML>
<head><meta charset = "utf-8"><title>starGirl</title><link rel="stylesheet" type="text/css" href="m.css">
</head>
<body onload = "init()"><div class="a_box"><a href= "1.html" style="font-size: 22px; text-decoration: none;">DEMO_1</a><a href="11.html" style="font-size: 22px; text-decoration: none;">  DEMO_2</a></div><script type = "text/javascript" src = "1.js"></script><script type = "text/javascript" src = "s.js"></script><div><canvas id = "canvas" width = "1340px" height = "550px"></canvas></div></body>
</html>

2、时钟图片展示：

js代码：

var dom = document.getElementById('clock');
var ctx = dom.getContext("2d");
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
//定义钟盘
function drawBackground(){ctx.save();ctx.translate(r, r);ctx.beginPath();ctx.lineWidth = 10;ctx.font ='18px Arial';ctx.textAlign = 'center'ctx.textBaseline = 'middle'ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);ctx.stroke();var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];//遍历获取坐标hourNumbers.forEach(function(number, i){var rad = 2 * Math.PI / 12 * i;var x = Math.cos(rad) * (r - 30);var y = Math.sin(rad) * (r - 30);ctx.fillText(number, x ,y);})//定义刻度for(var i=0;i<60;i++){var rad = 2 * Math.PI / 60 * i;var x = Math.cos(rad) * (r - 18);var y = Math.sin(rad) * (r - 18);ctx.beginPath();if(i % 5 == 0){ctx.arc(x, y, 2, 0, 2 * Math.PI, false);ctx.fillStyle = '#000';}else{ctx.arc(x, y, 2, 0, 2 * Math.PI, false);ctx.fillStyle = '#ccc';}ctx.fill();}}//定义时钟
function drawHour(hour,minute){ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 12 * hour;var mrad = 2 * Math.PI / 12 / 60 * minute;ctx.rotate(rad + mrad);ctx.lineWidth = 6;ctx.lineCap= 'round';ctx.moveTo(0 ,10);ctx.lineTo(0 ,-r / 2);ctx.stroke();ctx.restore();
}
//定义分钟
function drawMinute(minute,second){ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 60 * minute;var srad = 2 * Math.PI / 60 /60 * second;ctx.rotate(rad + srad);ctx.lineWidth = 3;ctx.lineCap= 'round';ctx.moveTo(0 ,10);ctx.lineTo(0 ,-r + 18);ctx.stroke();ctx.restore();
}
//定义秒钟
function drawSecond(second){ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 60 * second;ctx.rotate(rad);ctx.lineWidth = 3;ctx.lineCap= 'round';ctx.moveTo(-2 ,20);ctx.lineTo( 2, 20);ctx.lineTo( 1, -r + 18);ctx.lineTo( -1, -r + 18);ctx.fillStyle = '#c14543';ctx.fill();ctx.restore();
}
//定义钟盘圆点样式
function drawDot(){ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);ctx.fill();
}//时间函数
function draw(){ctx.clearRect(0, 0, width, height);var now = new Date();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();drawBackground();drawHour(hour,minute);drawMinute(minute,second);drawSecond(second);drawDot();ctx.restore();
}
setInterval(draw, 1000);

html代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>clock</title><style type="text/css">*{margin: 0;padding: 0;}body{background-color: #F5F5F5;}.body_box{width: 1024px;height: 550px;background-image: url(clock1.jpg);background-repeat: no-repeat;background-size: 100%;margin: 0px auto;text-align: center;margin-top: 20px;}</style>
</head>
<body><div class="a_box"><a href= "1.html" style="font-size: 22px; text-decoration: none; padding-top: 10px;">DEMO_1</a><a href="11.html" style="font-size: 22px; text-decoration: none;">  DEMO_2</a></div><div class="body_box"><canvas id="clock" width ="250px" height="250px" style="padding-top: 130px;">您的浏览器不兼容canvas</canvas></div><script type="text/javascript" src="11.js"></script>
</body>
</html>

html5制作星星闪烁和制作时钟相关推荐

java制作闪星星_Silverlight之我见——制作星星闪烁动画
圣诞节来了,无聊,做点东西纪念一下. 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成. 1.创建图形数组并设置背景透明,渐变笔触,大小等,而后 ...
雪花飘html动画,用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜...
雪花飘落: //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-animation: snowDown ...
HTML+CSS制作炫彩的数字时钟
HTML+CSS制作炫彩的数字时钟效果图如下: HTML部分代码如下: <!DOCTYPE html> <html lang="zh-Hans">< ...
HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤浪漫空中散落的花瓣3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人 ...
html的详情页面设计,HTML5+CSS3网页设计与制作实用教程单元7 网页特效与制作商品详情页面（105页）-原创力文档...
单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter's introduction 将JavaScript 程序嵌入HTML 代码中,对网页元素进行 ...
HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
js制作12进制的时钟特效
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
01前端入门HTML5 +Css3+电商网页制作：HTML5
01前端入门HTML5 +Css3+电商网页制作 0. 来源 1. 基础认识 1.1 Web 标准构成 1.2 基本语法 2. vscode使用 3. HTML 3.1 注释 3.2 标签 3.2.1 ...

html5制作星星闪烁和制作时钟

html5制作星星闪烁和制作时钟相关推荐

最新文章

热门文章