canvas
没有画椭圆的方法，以下代码可以画出椭圆，分享给大家供大家参考，具体实现方法如下：
1、在一个隐式的画布
(将
其
CSS
定义成：display:none
)
上画园。
2、将隐式画布的影像，以不同的宽高比值，画在另一个显式的画布，以使园变成椭圆。
3、进而，加进动画功能。
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>测试颜色背景</title>
<script>
var
ticker=0
var
col
=
new
Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000")
function
drawBackground(){
var
canvasHide=document.getElementById("hide")
//隐藏的画布
var
g=canvasHide.getContext("2d")
//找出隐藏画布
hide
的画笔
g
g.clearRect(0,0,1200,800)
//清理隐藏画布
var
i=0
do
{
//画
不同颜色
依次同心发散的园
g.beginPath()
var
grd=g.createRadialGradient(300,300,300-i*25,
300,300,265-i*25)
grd.addColorStop(0,col[(0+i+ticker)%col.length])
grd.addColorStop(1,col[(1+i+ticker)%col.length])
g.fillStyle=grd
g.arc(300,300,300-i*25,0,2*Math.PI)
g.fill()
i++
}
while(i<11)
//找出显式画布
myCanvas
的画笔
gg
var
gg=document.getElementById("myCanvas").getContext("2d")
gg.clearRect(0,0,myCanvas.width,myCanvas.height)
//清理显式画布
/*
将隐式画布
hide
的园形图像，
*
以
宽
600,
高
300
的比例,
*
画到显式画布
myCanvas,
*
结果，隐式画布
hide
的园形图像，在显式画布
myCanvas
上
成了椭圆
*/
gg.drawImage(canvasHide,0,0,600,300)
ticker++
}
function
preperation(){
setInterval('drawBackground()',1000)
}
</script>
<style>
#myCanvas{
position:absolute
left:0px
top:0px
}
#hide{
display:none
}
</style>
</head>
<body
onLoad="preperation()">
<canvas
id="myCanvas"
width="600"
height="400"
></canvas>
<canvas
id="hide"
width="600"
height="600"
></canvas>
</body>
</html>
希望本文所述对大家的web程序设计有所帮助。
代码有点多哦一、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)
}
说起特效来，HTML5还是很值得称道的：
1、HTML5 Canvas发光Loading动画
之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。
2、jQuery球状放大镜特效插件
今天我们要来分享一款基于jQuery的放大镜特效插件，和其他放大镜不同的是，这款jQuery放大镜插件是球状的，看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。
3、HTML5 Canvas粒子模拟效果
这是一款利用Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。
4、HTML5/CSS3带区域地图的联系表单
之前我们分享很多样式和功能各异的CSS3联系表单，比如HTML5/CSS3简易联系表单等等，都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单，它可以选中不同区域显示相应的地图，然后针对该区域填写联系表单。
5、CSS3 3D立方体Loading加载动画特效
之前我们分享过一些HTML5和CSS3的3D立方体特效，他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的，9个小立方体上下浮动，呈现波浪的效果，并且，这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。
希望你也可以学起来呀~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）