一、描述

模仿星空后黎明到来,日出的场景

二、代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="" charset="utf-8">
</head>
<body style="margin:0;padding:0;">
<canvas id="demo"></canvas>
</body>
<script type="text/javascript">
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)) && (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();
} </script>
</html>

【Canvas】canva实例-星空、日出的效果的更多相关文章

  1. canvas绘制经典星空连线效果

    来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...

  2. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  3. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  4. jQuery插件实例五:手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  5. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  6. [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  7. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

  8. 【javascript实例】 具有立体效果的图片浏览器

    此实例,直接粘贴代码即可运行,当然图片的路径不要忘记改了. 此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习.效果如图所示: html代码如下所示: <html xmlns=" ...

  9. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

  2. JS获取浏览器类型和版本号

    JS获取浏览器类型和版本号,增加了IE11的判断. 2015/7/5更新: 简化代码逻辑 var zbrowser = {} var ua = navigator.userAgent.toLowerC ...

  3. R自带数据包

    datasets(R自带数据包) 作者:王彦博 作品来源:百度百科 precip #长度为70的命名向量 euro #欧元汇率,长度为11,每个元素都有命名 landmasses #48个陆地的面积, ...

  4. 【解决】安装compass失败(gem install compass)

    原始日期:2016-01-25 16:26 这个问题比较常见.   很多人在安装ruby后再使用gem install compass命令安装compass,发现安装失败.     [解决方法:] / ...

  5. mysql的my.ini文件详解

    mysql数据库在配置时包含很多信息:端口号,字符编码,指定根路径 basedir,指定数据存放的路径等信息 mysql的字体编码分为两种: 服务器编码 客户端输入的编码 通常服务器的编码都是utf- ...

  6. 九度OJ:1002-Grading

    时间限制:1 秒内存限制:32 兆特殊判题:否提交:24102解决:6126 题目描述: Grading hundreds of thousands of Graduate Entrance Exam ...

  7. java中得到图片的宽度 高度:

    java中得到图片的宽度 高度:BufferedImage srcImage = null;srcImage = ImageIO.read(new File(srcImagePath));int sr ...

  8. php设计模式--命名空间与自动载入

    关于命名空间: 最早的php是没有命名空间的概念的,这样不能存在相同名称的类或者函数,当项目变大了之后,产生冲突的可能性就高了,代码量也会变大,为了规划,从php5.3开始对命名空间就支持了. 说明代 ...

  9. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  10. Example005控制弹出窗口居中显示

    <!-- 实例005控制弹出窗口居中显示 --> <head> <meta charset="UTF-8"> </head> < ...