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

来源：互联网发布：windows各版本开机音乐编辑：程序博客网时间：2024/04/27 17:26

这次在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>

阅读全文

0 0