用canvas编写表白动画

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<script>
/*我不相信有天堂,因为我被困在这个地狱的时间太长了*/
</script>
</head>
    
<body
 style="background-color:pink;"> 
        
<h1><p style="text-align:center;color:purple"> I Love You!</p></h1>
         
<canvas
 id="c"></canvas>         
<script>
var b = document.body;
var c = document.getElementsByTagName(‘canvas‘)[0];
var a = c.getContext(‘2d‘);
document.body.clientWidth;</script>
     
        
<script> with (m = Math)
C = cos, S = sin, P = pow, R = random;
c.width = c.height = f = 613;
h = -250;
function p(a, b, c) {
if (c > 60)
return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50,
625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a];
A = a * 2 - 1;
B = b * 2 - 1;
if (A * A + B * B < 1) {
if (c > 37) {
n = (j = c & 1) ? 6 : 4;
o = .5 / (a + .01) + C(b * 125) * 3 - a * 300;
w = b * h;
return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6]
}
if (c > 32) {
c = c * 1.16 - .15;
o = a * 45 - 20;
w = b * b * h;
z = o * S(c) + w * C(c) + 620;
return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7]
}
o = A * (2 - b) * (80 - c * 2);
w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2;
z = o * S(c) + w * C(c) + 700;
return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05]
}
}
setInterval(‘for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}‘, 0)</script>
<h3><p style="float:right;color:green"></p></h3>
</body> </html>

时间: 2024-11-03 05:35:41

用canvas编写表白动画的相关文章

程序员用HTML5制作的爱心树表白动画

体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm HTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base tar

canvas 之星空动画

最近看到位博主的博客背景图很是炫酷,查找下资料了解是canvas实现效果,今天就来看看详细解剖下吧. 实现思路 首先了解下canvas中的动画原理?canvas中的动画其实是通过不断的重绘来实现动起来的效果的.通过设计小球的位置变化,达到小球不断运动的效果.同时也可以设计小球衍射,大小的变化实现其他效果.这里就只涉及小球位置,颜色的变化吧. 1,定义小球对象. var ball = { xPointer: 100, //小球初始x坐标 yPointer: 100, //小球初始y坐标 speed

Android中使用SurfaceView和Canvas来绘制动画

其实每个View中都有Canvas可以用来绘制动画,只需要在这个View中重载onDraw()方法就可以,但是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做"画布")就和HTML5中的canvas标签一样可以在一定区域内自由绘制图形.Canvas+SurfaceView制作的动画与View Animation和Property Animation这类动画比起来更加适合大量的集中播放的动画,比如游戏画面.相机的图像显示等. 因为SurfaceView通常会在

canvas粒子文字动画教程

1,什么是canvas粒子动画 canvas粒子文字动画效果绚丽,实现的方法和难点主要是根据缓动函数来确定粒子的轨迹. 2.主要实现步骤 创建一个canvas,在canva上绘制文字或图片,然后获取像素的信息并生成一个粒子数组 var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); ... var dotList = []; for(var x=0; x<imageData.width; x+=mass) { for(v

用Canvas和属性动画造一只萌蠢的“小鬼”

最近没事的时候想自己写一个支持下拉刷新,上拉加载的自定义View.写着写着,就觉得最常见的"一个圈转啊转"的进度条太普通了. 于是,就想看看有没有更有趣的一点的加载效果.在GitHub上以"android loading"为关键字一搜索,就发现有作者开源了这么一个库: 库的地址是:https://github.com/ldoublem/LoadingView.里面提供了很多有趣的加载动画(非常棒),个人对其中如下一个效果产生了兴趣: 那么,开源的好处就来了,立刻打开

7个华丽的基于Canvas的HTML5动画

说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动画,包括画板.文字.图表等,希望你会喜欢. 1.HTML5 Canvas画板画图工具 可定义笔刷和画布 HTML5 Canvas还有一个比较实用的应用,那就是网络画板,这样我们就可以在网页上直接进行画图操作.今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义

浪漫程序员 HTML5爱心表白动画

我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心表白动画吧. 在线演示源码下载 转载自:http://www.html5tricks.com/html5-heart-animation.html 浪漫程序员 HTML5爱心表白动画

HTML5 Canvas火焰闪烁动画 火焰跟随鼠标

HTML5 Canvas火焰闪烁动画 火焰跟随鼠标 该款动画是基于Canvas,火焰上下窜动的效果非常逼真,而且火焰可以跟随鼠标移动,是一款非常酷炫的HTML5 Canvas动画. 下载地址:http://www.devstore.cn/code/info/262.html 运行截图: 版权声明:本文为博主原创文章,未经博主允许不得转载.

【转】HTML5 Canvas头发飘逸动画

原文:HTML5 Canvas头发飘逸动画 HTML5 Canvas动画非常炫酷,很多有创意的开发者可以利用HTML5的Canvas特性创造出很多不错的动画特效.今天我们要分享一款HTML5 Canvas头发飘逸动画,该动画模拟头发飘动的效果,加上可爱的人脸,可以说非常有技术含量,更富有创意. 点击图片演示: 源码下载