<!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的更多相关文章

  1. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  2. 在canvas中使用html元素

    让div悬浮于canvas之上   使用z-index控制层及顺序 慕课网canvas demo <div id="canvas-wrapper"> <canva ...

  3. canvas案例——画时钟

    基本思路,先画一个200半径的圆 ctx.arc(250,250,200,0,2*Math.PI); 然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转 / ...

  4. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  5. html5——canvas画直线

    <html> <head> <title>canvas demo</title> </head> <body> <canv ...

  6. HTML5 Canvas绘文本动画（使用CSS自定义字体）

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

  7. 使用 HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  8. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  9. 【python基础】 Tkinter小构件之canvas 画布

    [python之tkinter画布] 要画布就要使用tkinter的小构件,canvas(结构化的图形,用于绘制图形,创建图形编辑器以及实现自定制的小构件类) 我们先使用create_rectangl ...

随机推荐

  1. BZOJ4827 [Hnoi2017]礼物 多项式 FFT

    原文链接http://www.cnblogs.com/zhouzhendong/p/8823962.html 题目传送门 - BZOJ4827 题意 有两个长为$n$的序列$x$和$y$,序列$x,y ...

  2. Mybatis内批量插入Oracle

    <insert id="insertManagerInfoBatch" parameterType="java.util.List"> <se ...

  3. ECMAScript 6 字符串的扩展

    1.字符的Unicode表示法 ① JavaScript允许采用\uxxxx的形式来表示一个字符,其中xxxx表示字符的Unicode码点. 但是,这种表示方法有一个局限性,它的码点只能在\u0000 ...

  4. macOS上实现Qt应用程序做文件关联打开

    一.背景介绍 用Qt开发的应用程序要实现文件关联,双击时用默认关联的程序打开文件,在Windows上这个功能非常容易实现.Windows应用程序在安装的时候可以在注册表中写入相关的键值对.打开文件的时 ...

  5. 【Linux】-- 在linux上安装mysql及基本操作

    1.MySQL的安装 1.删除mariadb数据库 yum remove mariadb-libs.x86_64 CentOS7默认安装mariadb数据库,所以要先删除 2.下载mysql源 进入m ...

  6. selenium基础实例学习

    在这里我们通过selenium官方文档做给的实例以及翻译,做出如果代码注释   from selenium import webdriverfrom selenium.webdriver.common ...

  7. 潭州课堂25班：Ph201805201 tornado 项目 第六课 用户和图片分享的集成（课堂笔记）

    tornado 相关说明 改善图片上传功能 ,生成唯一的 ID ,与路径拼接,生成 URL, 这里引用 uuid 的 python 库 在 photo.py 中创建个类,用来  辅助用户上传的图片,生 ...

  8. MariaDB基本操作--（创建用户）（转）

    一. 创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username:你将创建的用户名 host:指定该用户 ...

  9. ECMA Script 6_解构赋值_模式匹配

    解构赋值 从数组中提取值,按照对应位置,对变量赋值 只要等号右边的值不是对象或数组,就先将其转为对象. 由于 undefined 和 null 无法转为对象,所以对它们进行解构赋值,都会报错 let ...

  10. Qt支持哪些硬件通信协议？？？

    如题,广大使用Qt开发嵌入式的伙伴们知道Qt支持哪些硬件通信协议的开发???目前已知的串口和网络TCP/IP协议开发支持,其他的呢??? 欢迎留言交流!!!