一、描述
模仿星空后黎明到来，日出的场景
二、代码
var moonX = 300;
var moonY = 150;
var moonR = 100;
window.onload = function(){
var canvas = document.getElementById('demo');
canvas.width = window.screen.width;
canvas.height = 1600;
var ctx = canvas.getContext('2d');
var linearGradient = ctx.createLinearGradient(0,0,0,1600);
linearGradient.addColorStop(0, "black");
linearGradient.addColorStop(0.65, "#035");
linearGradient.addColorStop(0.8, "orange");
linearGradient.addColorStop(1, "pink");
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.arc(moonX,moonY,moonR,Math.PI * 0,Math.PI *2,true);
ctx.closePath();
ctx.fill();
for(var i = 0 ; i < 50 ; i++){
var r = Math.random() * 10 + 5;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height * 0.25;
var a = Math.random() * 360;
if((x (moonX - moonR)) &&
(y < (moonY + moonR)) &&(y > (moonY - moonR))){
continue;
}
drawStar(ctx,x,y,r,a);
}
drawSun(ctx);
}
function drawSun(ctx){
var canvas = ctx.canvas;
var sunX = canvas.width * 0.5;
var sunY = canvas.height + moonR;
var interval = setInterval(function(){
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(sunX,sunY,moonR,Math.PI * 0,Math.PI *2,true);
ctx.closePath();
ctx.fill();
sunY = sunY - 10;
if(sunY < canvas.height){
clearInterval(interval);
drawText(ctx,"新的一天开始啦！",canvas.width * 0.65,canvas.height * 0.95);
}
},500);
}
function drawText(ctx,text,x,y){
ctx.fillStyle = "yellow";
ctx.font="30px Arial";
ctx.textAlign="start";
ctx.fillText(text,x,y);
}
function drawStar(ctx,x,y,r,rot){
ctx.save();
ctx.translate(x,y);
ctx.rotate(rot/180 *Math.PI);
ctx.scale(r,r);
starPath(ctx);
ctx.fillStyle = "#fb3";
//ctx.strokeStyle = "#fd5";
//ctx.lineWidth = 3 ;
//ctx.lineJoin = "round";
ctx.fill();
// ctx.stroke();
ctx.restore();
}
function starPath(ctx){
ctx.beginPath();
for(var i = 0 ; i < 5 ; i ++){
ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI),
-Math.sin((18 + i*72)/180 * Math.PI));
ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI) * 0.5,
-Math.sin((54+ i*72)/180 * Math.PI) * 0.5);
}
ctx.closePath();
}
canvas绘制经典星空连线效果
来自: 下面开始coding:先写个canvas标签
HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
使用ajax上传图片，并且使用canvas实现出上传进度效果
前端代码: &l ...
[ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示
Insert you title
[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...
【javascript实例】 具有立体效果的图片浏览器
此实例,直接粘贴代码即可运行,当然图片的路径不要忘记改了. 此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习.效果如图所示: html代码如下所示:
HTML5自学笔记[ 24 ]canvas绘图之星空草地
[译]git remote
git remote命令让我们可以创建, 查看, 删除一个到其他仓储的连结. 下图展示了我们的本地仓储有两个remote连接, 一个是中央仓储, 一个是其他开发者的仓储. 除了使用完整的url指向他们 ...
struts2不兼容servlet、COS
如果你在一个项目中使用了struts2,也就是说,你在web.xml中配置了如下代码: struts2
ubuntu16.04 64位server安装php7
You can do the following: sudo apt-get install python-software-properties sudo LC_ALL=C.UTF-8 add-ap ...
delphi xe5 android 服务端和手机端的源码下载
xe5 android的服务端和手机客户端的源代码下载地址
8.2.1.7 Use of Index Extensions 使用索引扩展
8.2.1.7 Use of Index Extensions 使用索引扩展 InnoDB 自动扩展每个secondary index 通过添加primary key columns to it,考虑 ...
System.Data.SQLite兼容32位和64位问题
SQLite版本分的很详细,本机是64位在32位会出现问题,经过搜索找到解决方案. 这是我以前写的32位在我现在的机子上的运行报错. 类似这样的. 将当前说明文档的目录下的x64.x86目录和Syst ...
scipy的一些函数名
rvs:随机变量pdf:概率密度函数cdf:累计分布函数sf:残存函数(1-CDF)ppf:分位点函数(CDF的逆)isf:逆残存函数(sf的逆)stats:返回均值,方差,(费舍尔)偏态,(费舍尔) ...
ASP.Net Core 2.2 MVC入门到基本使用系列 (三)(转)
本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...
