Canvas Demo
<!DOCTYPE html>
<html>
<head>
<title>ゆき</title>
</head>
<style type="text/css" media="screen">
* {
padding: 0px;
border: 0px;
margin: 0px;
}
#c {
background-color: black;
}
</style>
<body>
<canvas id="c"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c"),
ctx = c.getContext("2d");
var width = c.width = innerWidth;
var height = c.height = innerHeight;
var store = [];
var lin = 0;
for (var i = 0; i < height; i++) {
store.push({
x: Math.floor(Math.random() * width),
y: lin
});
lin++;
}
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
for (var i = 0; i < height; i++) {
ctx.beginPath();
ctx.fillRect(store[i].x, store[i].y, 1, 1);
ctx.fillStyle = "#ffffff";
ctx.stroke();
store[i].y += 1;
if (store[i].y > c.height)
store[i].y = 0;
if (Math.floor(Math.random() > 0.5)) {
store[i].x += Math.random() * 0.5;
} else {
store[i].x -= Math.random() * 0.5;
}
}
window.requestAnimationFrame(draw);
}
draw();
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>このひかり</title>
</head>
<body>
<canvas id="c"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c"),
ctx = c.getContext("2d");
c.width = innerWidth;
c.height = innerHeight;
var name =['J','o','k','i','n','g']
var lines = [],
maxSpeed = 5,
spacing = 5,
xSpacing = 0,
n = innerWidth / spacing,
colors = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"];
for (i = 0; i < n; i++){
xSpacing += spacing;
lines.push({
x: xSpacing,
y: Math.round(Math.random()*c.height),
width: 7,
height: Math.round(Math.random()*(innerHeight/10)),
speed: Math.random()*maxSpeed + 1,
color: colors[Math.floor(Math.random() * colors.length)]
});
}
function draw(){
var i;
ctx.clearRect(0,0,c.width,c.height);
for (i = 0; i < n; i++){
ctx.fillStyle = lines[i].color;
ctx.font="20px Georgia";
lines[i].y += lines[i].speed;
test(i);
ctx.textAlign="center";
if (lines[i].y > c.height)
lines[i].y = 0 - lines[i].height;
}
requestAnimationFrame(draw);
}
var test = (i)=>{
ctx.fillText(name[Math.floor(Math.random() * name.length)],lines[i].x, lines[i].y);
}
draw();
</script>
</html>
Canvas Demo的更多相关文章
- canvas写的一个小时钟demo
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...
- 在canvas中使用html元素
让div悬浮于canvas之上 使用z-index控制层及顺序 慕课网canvas demo <div id="canvas-wrapper"> <canva ...
- canvas案例——画时钟
基本思路,先画一个200半径的圆 ctx.arc(250,250,200,0,2*Math.PI); 然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转 / ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- html5——canvas画直线
<html> <head> <title>canvas demo</title> </head> <body> <canv ...
- HTML5 Canvas绘文本动画(使用CSS自定义字体)
一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- 【python基础】 Tkinter小构件之canvas 画布
[python之tkinter画布] 要画布就要使用tkinter的小构件,canvas(结构化的图形,用于绘制图形,创建图形编辑器以及实现自定制的小构件类) 我们先使用create_rectangl ...
随机推荐
- 前端开发-1React-1概述
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站.做出来以后,发现这套东西很 ...
- HDU 5984.Pocky(2016 CCPC 青岛 C)
Pocky Let’s talking about something of eating a pocky. Here is a Decorer Pocky, with colorful decora ...
- Spring Cloud微服务笔记(一)微服务概念
微服务概念 一.什么是微服务架构 微服务,是一个小的.松耦合的分布式服务. 为什么需要微服务: 1)单体系统部署在一个进程中,修改了一个小功能,为了部署上线就会影响其他功能. 2)单体应用各个功能模块 ...
- XVII Open Cup named after E.V. Pankratiev. GP of Moscow Workshops
A. Centroid Tree 枚举至多两个重心作为根,检查对于每个点是否都满足$2size[x]\leq size[father[x]]$即可. #include<stdio.h> # ...
- IDEA_教你十分钟下载并破解IntelliJ IDEA(2017)(转)
之前都是用myeclipse,但是最近发现看的很多教学视频都是使用 IntelliJ IDEA,于是决定换个软件开始新的学习征程! 下面讲讲我是如何在十分钟之内安装并破解该软件. 1.首先,我找到了 ...
- [LeetCode] Linked List Components 链表组件
We are given head, the head node of a linked list containing unique integer values. We are also give ...
- Java语言基础之数组
引出数组和数组的定义 为什么要使用数组: 问题一: 声明变量时,每一个单独的变量都要对应一个变量名,但现在要处理一组相同类型的数据时,如要表示班上100个人的年纪,绝不能定义100个变量来表示每一个人 ...
- [POI2002][HAOI2007]反素数(Antiprime)
题目链接 这道题需要用到整数唯一分解定理以及约数个数的计算公式.这里我就不再阐述了. 公式可以看出,只有指数影响约数个数,那么在唯一分解出的乘式中,指数放置的任何位置都是等价的.(即 23*34*57 ...
- 如何设置 jenkins 任务执行的历史记录在左侧显示的格式?
java -jar I:\CDC\jenkins\jenkins-cli.jar -s http://$ENV:MasterHost.us.oracle.com set-build-display-n ...
- ie清理缓存
说废话,直接上图. 1.打开浏览器 2.工具--->Internet选项 3.常规--->设置 4.Internet临时文件--->查看文件 5.将缓存文件夹中内容全部删除