一、HTML代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<canvas></canvas>
<script src="js/js.js" type="text/javascript"></script>
</body>
</html>
二、CSS代码:
* {
margin: 0
padding: 0
border: 0
background: #000000
}
canvas {
position: relative
top: 50%
left: 50%
margin-left: -50vmin
width: 100vmin
height: 100vmin
overflow: hidden
display: block
}
三、JS代码:
var canvas = document.getElementsByTagName('canvas')[0]
var ctx = canvas.getContext('2d')
canvas.width = canvas.height = 400
aaa()
function aaa() {
var a, b, c, d, e, tim, max, x, y, x2, y2, px, py, tx, ty,
r, mc, ms, st, len, gx, gy, gz, yp, yp2, xp, xp2, z
ctx.fillStyle = "rgb(0,0,0)"
ctx.fillRect(0, 0, canvas.width, canvas.height)
tim = new Date().getTime() / 70
gz = Math.sin(tim / 31)
gx = Math.sin(tim / 29) / 2
gy = Math.sin(tim / 37) / 2
a = tim / 79
yp = Math.cos(a)
yp2 = Math.sin(a)
a = tim / 77
xp = Math.cos(a)
xp2 = Math.sin(a)
ty = canvas.height / 2
tx = canvas.width / 2
py = 35
px = py * Math.sin(Math.PI / 3)
for (d = 0d <3d++) {
r = Math.PI * 2 / 3 * d
mc = Math.cos(r)
ms = Math.sin(r)
for (a = 0a <10a++) {
for (b = 0b <10b++) {
c = 0
if (b % 2 == 1) c = 0.5
x = (b) * px + tim * 4
y = (a + c) * py
hisi(x, y, d)
}
}
}
d = st
for (z = 0z <10000z++) {
if (!st) break
e = d.q
ctx.beginPath()
for (a = 0a <e.lengtha++) ctx.lineTo(tx + e[a][0] * 140, ty + e[a][1] * 140)
ctx.closePath()
c = "hsl(" + d.c + ",97%," + d.lit + "%)"
ctx.fillStyle = c
ctx.strokeStyle = c
ctx.lineWidth = 1
ctx.fill()
if (!d.tugi) break
d = d.tugi
}
function hisi(x, y, col) {
var a, b, c, d, e, x0, y0, x1, y1, z1, p, p1, p2, rx, ry,
r1, r2, myp, myp2, z
p = [
[x, y],
[x + px / 2, y + py / 4],
[x, y + py / 2],
[x - px / 2, y + py / 4]
]
len = 4
p1 = []
for (a = 0a <4a++) {
c = p[a]
d = p[(a + 1) % 4]
for (b = 0b <lenb++) {
r1 = b / len
r2 = 1 - r1
x0 = c[0] * r2 + d[0] * r1
y0 = c[1] * r2 + d[1] * r1
p1.push([x0, y0])
}
}
p = p1
p2 = []
for (a = 0a <p.lengtha++) {
x0 = p[a][0]
y0 = p[a][1]
if (col) {
x1 = x0 * mc - y0 * ms
y1 = x0 * ms + y0 * mc
x0 = x1
y0 = y1
}
rx = (x0 / px / 20) * Math.PI * 2
ry = (y0 / py / 20) * Math.PI * 2 + tim / 33
myp = Math.cos(rx)
myp2 = Math.sin(rx)
z = Math.cos(ry) / 2 + 1
y = Math.sin(ry) / 2
x = z * myp2
z = z * myp
y1 = y * yp + z * yp2
z1 = y * yp2 - z * yp
x1 = x * xp + z1 * xp2
z = x * xp2 - z1 * xp
z1 = Math.pow(1.4, z + gz)
x = (x1 + gx) * z1
y = (y1 + gy) * z1
p2.push([x, y, z])
}
pp(p2, col)
} //hisi
function pp(q, co) {
var a, b, c, d, e, f, g, h, i, ob, col
ob = {
q: q,
c: (co * 120 + 55)
}
a = q[2 * len]
b = q[1 * len]
c = q[0]
d = [b[0] - a[0], b[1] - a[1], b[2] - a[2]]
e = [c[0] - b[0], c[1] - b[1], c[2] - b[2]]
h = d[0] * e[1] - d[1] * e[0]
f = d[1] * e[2] - d[2] * e[1]
g = d[2] * e[0] - d[0] * e[2]
if (h <0) {
h = -h
f = -f
g = -g
i = 1
}
a = f - g * 0.7 + h * 1.2
b = Math.abs(f) + Math.abs(h) + Math.abs(g)
a = a / b
a = a * 25 + 25
if (a <10) a = 10
if (!i) a *= 0.4
ob.lit = a
a = (q[0][2] + q[1 * len][2] + q[2 * len][2] + q[3 * len][2]) / 4
ob.m = a
if (!st) {
st = ob
return
}
b = st
while (1) {
if (b.m >a) {
if (!b.mae) {
st = ob
} else {
b.mae.tugi = ob
}
ob.mae = b.mae
b.mae = ob
ob.tugi = b
break
}
if (!b.tugi) {
b.tugi = ob
ob.mae = b
break
}
b = b.tugi
}
}
requestAnimationFrame(aaa)
}
画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas")
var cxt=c.getContext("2d")
cxt.fillStyle="#FF0000"
cxt.fillRect(0,0,150,75)
</script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas")
然后,创建 context 对象:
var cxt=c.getContext("2d")
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000"
cxt.fillRect(0,0,150,75)
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
转载,仅供参考。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)