html制作满天星,HTML5练习(1)制作满天星
1、了解canvas
这是画布2、设置body背景色
body{
background-color: black;
}
3、初始化画布及context
context作为全局变量
var context;
function init(){
//获取canvas
var stars = document.getElementById("stars");
windowWidth = window.innerWidth;
stars.width=windowWidth;
//获取context
context = stars.getContext("2d");
}
4、定义星星对象
//星星对象
var Star = function (){
this.x = -1;//横坐标
this.y = -1;//纵坐标
this.text="*";//文本
this.font="italic bold 24px serif";
this.color = "white";//颜色
//产生坐标
this.getPos=function(){
var xx = windowWidth * Math.random(); //不要超出边界
var yy = 600 * Math.random(); //不要超出边界
this.x = Math.floor(xx);
this.y = Math.floor(yy);
}
//产生随机颜色,四种不同亮度的星星
this.getColor=function(){
var _r = Math.random();
if(_r<0.2){
this.color="#0000FF";
}else if(_r<0.5){
this.color = "white";
}else if(_r<0.8){
this.color = "#989898";
}else{
this.color = "#B8B8B8";
}
}
//产生随机fontSize,最大是15个像素,最小3个像素
this.getFont = function(){
var _r = Math.random()*12+3;
this.font = "italic bold "+Math.ceil(_r)+"px serif";
}
//初始化
this.init=function(){
this.getPos();
this.getColor();
this.getFont();
}
//绘制
this.draw=function(){
context.fillStyle=this.color;
context.font=this.font;
context.fillText(this.text,this.x,this.y);
}
}
5、画月亮
//画月亮
function drawMoon(){
var moon = new Image();
moon.src = "../img/moon.png"
context.drawImage(moon,10,10);
}
6、在onload事件中绘制星星及月亮
var arr = new Array();
var starCount = 1000;
window.onload = function() {
init();
//画星星
for (var i=0;i
var star = new Star();
star.init();
star.draw();
arr.push(star);
}
drawMoon();
}
之所以要用数组,是因为等下我们要让星星闪起来
7、星星闪起来
//星星闪起来
function playStars(){
for (var n = 0; n
arr[n].getColor(); //重新获取颜色
arr[n].draw(); //重新绘制
}
setTimeout("playStars()",500);//半秒钟闪一次
}
在onload事件的回调函数最后一行加入调playStars的代码
效果:
全部代码:
html>
满天繁星
var arr = new Array();
var starCount = 1000;
var context;
//初始化画布及context
function init(){
//获取canvas
var stars = document.getElementById("stars");
windowWidth = window.innerWidth;
stars.width=windowWidth;
//获取context
context = stars.getContext("2d");
}
//星星对象
var Star = function (){
this.x = -1;//横坐标
this.y = -1;//纵坐标
this.text="*";//文本
this.font="italic bold 24px serif";
this.color = "white";//颜色
//产生坐标
this.getPos=function(){
var xx = windowWidth * Math.random();
var yy = 600 * Math.random();
this.x = Math.floor(xx);
this.y = Math.floor(yy);
}
//产生随机颜色
this.getColor=function(){
var _r = Math.random();
if(_r<0.2){
this.color="#0000FF";
}else if(_r<0.5){
this.color = "white";
}else if(_r<0.8){
this.color = "#989898";
}else{
this.color = "#B8B8B8";
}
}
//产生随机fontSize
this.getFont = function(){
var _r = Math.random()*12+3;
this.font = "italic bold "+Math.ceil(_r)+"px serif";
}
//初始化
this.init=function(){
this.getPos();
this.getColor();
this.getFont();
}
//绘制
this.draw=function(){
context.fillStyle=this.color;
context.font=this.font;
context.fillText(this.text,this.x,this.y);
}
}
window.onload = function() {
init();
//画星星
for (var i=0;i
var star = new Star();
star.init();
star.draw();
arr.push(star);
}
drawMoon();
playStars();
}
//画月亮
function drawMoon(){
var moon = new Image();
moon.src = "../img/moon.png"
context.drawImage(moon,10,10);
}
//星星闪起来
function playStars(){
for (var n = 0; n
arr[n].getColor();
arr[n].draw();
}
setTimeout("playStars()",500);
}
body{
background-color: black;
}
原创,转载请注明出处
html制作满天星,HTML5练习(1)制作满天星相关推荐
- html5中制作表格,(html5表格的制作.doc
(html5表格的制作 教学项目五 HTML中表格的制作 [教学内容] 讲解HTML中制作表格的标志 [教学目的] 使学生掌握简单表格的制作 [教学重点] 表格中单元格的合并操作 [教学难点] 理解属 ...
- 怎么用html5制作申请表,html-5 表格的制作
<html-5 表格的制作>由会员分享,可在线阅读,更多相关<html-5 表格的制作(6页珍藏版)>请在人人文库网上搜索. 1.教学项目五 HTML中表格的制作[教学内容]讲 ...
- html5 在线 ppt 制作软件,HTML5 幻灯片相册制作工具(HTML5 Slideshow Maker)
AnvSoft HTML5 Slideshow Maker 是一个易于使用的HTML5照片幻灯片的创建者.以往制作相册大多数采用Flash,現在已经迈入 HTML5 的时代,网页的特性也越来越丰富,如 ...
- H5页面制作和HTML5小游戏制作平台哪家好
H5页面是由第五代HTML互联网超文本语言进行开发实现的,多数在微信上进行宣传,例如TOM游戏制作平台的游戏案例中也是基于h5进行开发的,包括现在我们看到的网页,都是基于h5这个规范的实现的,现在随着 ...
- php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
- php.ini在哪里 微赞_微赞秀HTML5移动场景制作平台系统v1.0.2
原标题:微赞秀HTML5移动场景制作平台系统v1.0.2 功能强大的HTML5移动场景制作平台系统程序源码,高仿易企秀并独具多平台移动应用素材组件采集功能,完善的用户权限等级体系与用户消费盈利模式完美 ...
- HTML5期末大作业:电影在线网站设计——漫威电影(2页) 免费大学生网页设计制作作业作品下载dreamweaver制作静态html网页设计作业作
HTML5期末大作业:电影在线网站设计--漫威电影(2页) 免费大学生网页设计制作作业作品下载dreamweaver制作静态html网页设计作业作 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- 用html做个猜字游戏,HTML5 Canvas API制作简单的猜字游戏
这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下 二话不说,先上效果图以及源代 ...
- html5课件动画制作,从此再也不担心课件/动画的开发了!
原标题:从此再也不担心课件/动画的开发了! 数字学习工具 定期推送优质地数字学习工具,敬请期待! 本期编辑:王幸娟.冯孟坭.丁雪菲 在前面的文章中,我们向大家隆重推出了本公众号运营团队的精诚之作--& ...
最新文章
- c++ 动态分配数组_C与C++内存管理避坑指南
- REST API出错响应的设计(转)
- 掘金Markdown使用
- 使用C#开发数据库应用系统
- Windows下图文详解PHP三种运行方式(php_mod、cgi、fastcgi)
- rust python对比_Python Rust 迭代器对比
- C#/winform 腾讯QQ注册
- OLAP-presto-大数据Week13-DAY-presto
- 用户画像案例一:汽车精准营销
- codejock Toolkit Pro for Visual C++ MFC 零售版
- 计算机网络防御的论文,计算机网络防御策略论文.doc
- 如何撰写一篇研究论文的介绍(introduction)
- Docker 三剑客之 Compose
- LDA变分法和采样法
- “移除”虚拟机和“从磁盘中删除”虚拟机的区别
- laravel评价详情及商家回复api
- 解决使用mp4v2封装的mp4文件在Wowza的hls上无法播放问题
- 利用计算机辅助设计,一种利用计算机辅助设计和制作手工栽绒毯的方法
- 笔记本电池只能充电到95%-99%之间无法充至100%的原因和处理方案
- 实时时钟芯片DS3231应用笔记,使用指南,FAQ全集