【Canvas】canva实例-星空、日出的效果
一、描述
模仿星空后黎明到来,日出的场景
二、代码
<!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实例-星空、日出的效果的更多相关文章
- canvas绘制经典星空连线效果
来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...
- HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- 使用ajax上传图片,并且使用canvas实现出上传进度效果
前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...
- [ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...
- 【javascript实例】 具有立体效果的图片浏览器
此实例,直接粘贴代码即可运行,当然图片的路径不要忘记改了. 此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习.效果如图所示: html代码如下所示: <html xmlns=" ...
- HTML5自学笔记[ 24 ]canvas绘图之星空草地
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- 记一次调试串口设备Bug的经历
最近花了差不多1天的时间在折腾一个Bug,该Bug的表象如下: 这个Bug还特别独特,在开发电脑中无提示,在终端用户那里每次使用软件的时候都报这个.仔细思考了一下最近在源码中新添加的功能,没发现有啥特 ...
- elememtui(有关权限的那些事)
前言:关于权限路由的那些事儿…… 业务情景描述:现有一个后台管理系统,共存在三种类型的人员,①超级管理员(称作1):②组别管理员(2):③普通用户(3):每种类型的人看到的操作栏并不一样,可以进行的操 ...
- AngularJS高级程序设计读书笔记 -- 服务篇
服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...
- Jmeter-BeanShell PostProcessor提取请求及响应结果并保存到本地文件
1.新建一个本地csv文件,存放请求需要使用的变量值account,password,并配置CSV Data Set Config 2.添加一个HTTP请求 3.添加正则提取器用来提取响应结果中的re ...
- angularJS directive详解(自定义指令)
Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...
- PHP数组按引用传递
<?php /**PHP数组按引用传递**/ $arr = array( array('id' => 1, 'name' => 'name1'), array('id' => ...
- JAVA基础——方法笔记
java方法_学习笔记 由于我本人对java方法已经比较熟悉了,java方法的定义和使用也比较简单,这里只列举了基于我自身容易搞错的地方,希望对大家的学习有帮助!! 方法的参数可以是基本数据类型,如 ...
- 个人开源项目testall 持续更新中···
项目在GitHub上:https://github.com/x113773/testall ,喜欢的给个星星呀,亲~ 打算把用到过的和学习过的,所有前后端技术都集成到这个项目里,并在issues里配以 ...
- VMware Mac OS中无法找到适应的分辨率的解决办法
使用VMware安装的Mac OS中,有时在显示器的分辨率中的选择项里面,没有对应显示的分辨率可供选择的时候(无法自适应),可以在虚拟机设置里,显示器中修改强制分辨率.修改过后重启虚拟机,就可以有对应 ...
- accp8.0转换教材第5章事务、视图、索引、备份和恢复理解与练习
知识点:事务.视图.索引.数据库的备份和恢复 一.单词部分 ①transation事务②atomicity原子性③consistency一致性④isolation隔离性 ⑤durability持久性⑥ ...