用c语言编写动态爱心树表白,程序员用HTML5制作的爱心树表白动画
HTML代码如下:
程序员用HTML5制作的爱心树表白动画- 柯乐义
亲爱的何文琪:
曾经,
有一份真挚的爱情摆在我面前,
我没有珍惜,
等到我失去的时候才后悔莫及,
人世间最痛苦的事莫过于此......
如果上天能够给我一个再来一次的机会,
我会对那个女孩子说六个字:
何文琪我爱你!
如果非要在这份爱上加一个期限,
我希望是.....
一万年!
-- 爱你的柯乐义--
(function(){
var canvas = $('#ke'+'leyi');
if (!canvas[0].getContext) {
$("#error").show();
return false; }
var width = canvas.width();
var height = canvas.height();
canvas.attr("width", width);
canvas.attr("height", height);
var opts = {
seed: {
x: width / 2 - 20,
color: "rgb(190, 26, 37)",
scale: 2
},
branch: [
[535, 680, 570, 250, 500, 200, 30, 100, [
[540, 500, 455, 417, 340, 400, 13, 100, [
[450, 435, 434, 430, 394, 395, 2, 40]
]],
[550, 445, 600, 356, 680, 345, 12, 100, [
[578, 400, 648, 409, 661, 426, 3, 80]
]],
[539, 281, 537, 248, 534, 217, 3, 40],
[546, 397, 413, 247, 328, 244, 9, 80, [
[427, 286, 383, 253, 371, 205, 2, 40],
[498, 345, 435, 315, 395, 330, 4, 60]
]],
[546, 357, 608, 252, 678, 221, 6, 100, [
[590, 293, 646, 277, 648, 271, 2, 80]
]]
]]
],
bloom: {
num: 700,
width: 1080,
height: 650,
},
footer: {
width: 1200,
height: 5,
speed: 10,
}
}
var tree = new Tree(canvas[0], width, height, opts);
var seed = tree.seed;
var foot = tree.footer;
var hold = 1;
canvas.click(function(e) {
var offset = canvas.offset(), x, y;
x = e.pageX - offset.left;
y = e.pageY - offset.top;
if (seed.hover(x, y)) {
hold = 0;
canvas.unbind("click");
canvas.unbind("mousemove");
canvas.removeClass('hand');
}
}).mousemove(function(e){
var offset = canvas.offset(), x, y;
x = e.pageX - offset.left;
y = e.pageY - offset.top;
canvas.toggleClass('hand', seed.hover(x, y));
});
var seedAnimate = eval(Jscex.compile("async", function () {
seed.draw();
while (hold) {
$await(Jscex.Async.sleep(10));
}
while (seed.canScale()) {
seed.scale(0.95);
$await(Jscex.Async.sleep(10));
}
while (seed.canMove()) {
seed.move(0, 2);
foot.draw();
$await(Jscex.Async.sleep(10));
}
}));
var growAnimate = eval(Jscex.compile("async", function () {
do {
tree.grow();
$await(Jscex.Async.sleep(10));
} while (tree.canGrow());
}));
var flowAnimate = eval(Jscex.compile("async", function () {
do {
tree.flower(2);
$await(Jscex.Async.sleep(10));
} while (tree.canFlower());
}));
var moveAnimate = eval(Jscex.compile("async", function () {
tree.snapshot("p1", 240, 0, 610, 680);
while (tree.move("p1", 500, 0)) {
foot.draw();
$await(Jscex.Async.sleep(10));
}
foot.draw();
tree.snapshot("p2", 500, 0, 610, 680);
// 会有闪烁不得意这样做, (>﹏<)
canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
canvas.css("background", "#ffe");
$await(Jscex.Async.sleep(300));
canvas.css("background", "none");
}));
var jumpAnimate = eval(Jscex.compile("async", function () {
var ctx = tree.ctx;
while (true) {
tree.ctx.clearRect(0, 0, width, height);
tree.jump();
foot.draw();
$await(Jscex.Async.sleep(25));
}
}));
var textAnimate = eval(Jscex.compile("async", function () {
$("#code").show().typewriter();
}));
var runAsync = eval(Jscex.compile("async", function () {
$await(seedAnimate());
$await(growAnimate());
$await(flowAnimate());
$await(moveAnimate());
textAnimate().start();
$await(jumpAnimate());
}));
runAsync().start();
})();
适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
首页 特效 原文
表白的文字可以自己修改
程序员用HTML5给女朋友制作的3D相册
程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近.程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的.本相册使用了HTML5的画布技术,需要谷歌 ...
浪漫程序员 HTML5爱心表白动画
我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心 ...
html5式程序员表白
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/whqet/article/details/26394493 前端开发whqet,csdn,王海庆,w ...
[Mac A]为什么国外程序员爱用 Mac?
from http://www.vpsee.com/2009/06/why-programmers-love-mac/ Mac 在国外很受欢迎,尤其是在 设计/web开发/IT 人员圈子里.普通用户喜 ...
html5 式程序员表白
html5 式程序员表白 王海庆 于 星期三, 04/06/2014 - 00:44 提交 今天是个好日子,2014年5月20日,表白的最佳时机,虽说孩子已经四岁.结婚已经五年.可是也不能够偷懒.于是 ...
程序员最爱 Mac、JS 是最热门技术
概况: 今年,有超过5万名开发者向我们分享了他们是谁,做什么工作,以及他们的成果.通过本文,你将看到有史以来最为全面的一次开发者情况调查的结果. 每8秒钟,就会有一位开发者在Stack Overflo ...
好程序员技术分享html5和JavaScript的区别
好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...
好程序员web前端分享18个用CSS制作出来的东西
好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...
随机推荐
HDU 5047 推公式+别样输出
题意:给n个‘M'形,问最多能把平面分成多少区域 解法:推公式 : f(n) = 4n(4n+1)/2 - 9n + 1 = (8n+1)(n-1)+2 前面部分有可能超long long,所以要转化 ...
Android打Path的方法
转自:http://blog.csdn.net/xiangzi10/article/details/42710099 作为程序员,了解diff&patch命 令是非常必要的.比如说我们发现某个 ...
Web Service 其他服务器检测不到查询测试按钮
1.Web Service 其他服务器检测不到查询测试按钮,config需要修改地方: ...
Form的用法
提交页面:
用c语言编写动态爱心树表白,程序员用HTML5制作的爱心树表白动画相关推荐
- html5效果浪漫表白,程序员用HTML5做了一个心形表白特效,其实我们也懂浪漫!...
520爱心表白特效 谁说程序员不懂浪漫? 曾经有一份真挚的爱情摆在我面前,但是我没有珍惜,[因为我是程序员] 等到了失去的时候才追悔莫及,尘世间最痛苦的事莫过于此. 如果老天可以再给我一个再来一次的机 ...
- html5爱情树怎么修改,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾 ...
- html5表白树效果图,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾 ...
- c语言动态烟花小程序代码,如何用c语言编写动态烟花
用c语言编写动态烟花的方法:首先绘制菜单界面显示文字:然后设置烟花有上升阶段和爆炸阶段,定义烟花和烟花弹结构体:最后初始化数据,加载资源贴图,随机发射数目随机. 用c语言编写动态烟花的方法: 效果展示 ...
- c语言烟花程序视频,如何用c语言编写动态烟花
用c语言编写动态烟花的方法:首先绘制菜单界面显示文字:然后设置烟花有上升阶段和爆炸阶段,定义烟花和烟花弹结构体:最后初始化数据,加载资源贴图,随机发射数目随机. 用c语言编写动态烟花的方法: 效果展示 ...
- c++语言表白超炫图形_让C/C++程序员告诉你什么叫浪漫,表白黑科技,炫酷多彩求爱利器...
原标题:让C/C++程序员告诉你什么叫浪漫,表白黑科技,炫酷多彩求爱利器 前言 缘是美丽的邂逅,爱是心跳的感觉,情是心灵的交会,恋是甜蜜的思念,走在爱与被爱的边缘,你见或者不见,爱你的心始终不改变!C ...
- 用c语言编写实心菱形,C语言编写内置菱形的程序
C语言编写内置菱形的程序 最近迷上了用C语言编写图形的输出程序,有矩形的.三角形.等腰三角形,平行四边形.菱形.沙漏形.今天尝试着将菱形内置到矩形中,结果成功了,下面将快乐分享给大家,也希望广大C程序 ...
- C语言编写一下棋程序,C语言编写的与电脑下棋程序代码
C语言编写的与电脑下棋程序代码 C语言编写的与电脑下棋程序代码 #include "stdafx.h" #include using namespace std; void che ...
- C语言编写的判断素数的程序
下面是一个用C语言编写的判断素数的程序: 复制#include <stdio.h>int main() {int n;printf("请输入一个数字:");scanf( ...
最新文章
- Markdown文章转化为富文本文章
- 浅谈Java中的final关键字
- 发动机异响故障诊断与排除_发动机缺缸故障诊断以及排除方法
- “ yield”关键字有什么作用?
- 3大VR虚拟现实产品PK赛:HTC、Oculus、索尼谁是大哥
- 读CSS DIV网页样式与布局心得体会
- 前端状态机系列:SCXML与XState对应关系
- slam十四讲第二版 pdf_先搞定SLAM,再谈如何抓住下一代互联网产业爆发点!
- 用Unity的Animation播放Animator动画Clip
- linux运维、架构之路-Kubernetes本地镜像仓库+dashboard部署
- SQL语法中的JOIN类型
- LeetCode 1——两数之和
- 百度认证(深度学习初级工程师)考试题2
- 开源办公系统:支持在线Office在线编辑、文档协同
- layabox 学习笔记
- C++复数运算符重载,复数开平方
- CentOS7—Firefox—截图工具—fireshot插件
- UVALive - 3713 - Astronauts(图论——2-SAT)
- 华为鸿蒙备胎计划,重磅!华为启动“备胎”计划,神秘项目曝光代号
- (附源码)springboot音乐播放小程序 毕业设计 031306