情人节表白神器

所属分类:其他-动画效果

 45639  393  查看评论 (17)
分享到微信朋友圈
X
情人节表白神器 ie兼容10

代码实现说明

1.创建画布与图片

// 创建画布
var ctx = canvas.getContext('2d');
// 创建图片对象
var heartImage = new Image();

2.创建爱心对象

type参数为0就显示随机文字,否则只显示爱心不显示文字

function Heart(type){
	this.type = type;
	// 初始化生成范围
	this.x = Math.random() * wW;
	this.y = Math.random() * wH;

	this.opacity = Math.random() * .5 + .5;

	// 偏移量
	this.vel = {
		x: (Math.random() - .5) * 5,
		y: (Math.random() - .5) * 5
	}

	this.initialW = wW * .5;
	this.initialH = wH * .5;
	// 缩放比例
	this.targetScale = Math.random() * .15 + .02; // 最小0.02
	this.scale = Math.random() * this.targetScale;

	// 文字位置
	this.fx = Math.random() * wW;
	this.fy = Math.random() * wH;
	this.fs = Math.random() * 10;
	this.text = getText();

	this.fvel = {
		x: (Math.random() - .5) * 5,
		y: (Math.random() - .5) * 5,
		f: (Math.random() - .5) * 2
	}
}

3.通过爱心绘制方法在画布上绘制爱心图片的位置

Heart.prototype.draw = function(){
	ctx.save();
	ctx.globalAlpha = this.opacity;
	ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
	ctx.scale(this.scale + 1, this.scale + 1);
		if(!this.type){
			// 设置文字属性
		ctx.fillStyle = getColor();
			ctx.font = 'italic ' + this.fs + 'px sans-serif';
			// 填充字符串
			ctx.fillText(this.text, this.fx, this.fy);
		}
	ctx.restore();
}
// 爱心变动
Heart.prototype.update = function()

4.使用定时器实时绘制爱心

function render(){
	ctx.clearRect(0, 0, wW, wH);
	for(var i = 0; i < hearts.length; i++){
		hearts[i].draw();
		hearts[i].update();
	}
	requestAnimationFrame(render);
}
相关插件-动画效果

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 45648  472

jquery3d图片旋转插件

拖动鼠标即可看到图片旋3D转动画
  动画效果
 43400  420

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 35216  319

很酷的jQuery文字切换动画

文字切换动画,很简单很实用,适合做SLOGAN
  动画效果
 31919  335

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    404 not found 0
    2020/3/19 11:41:15
    我最帅了 0
    2018/4/23 0:18:40
    在手机上看,表白会失败的 回复
    小君 0
    2018/2/13 11:47:31
    大神 我们一个央视答题活动明天情人节要用到你的插件,不算侵权的吧~
    回复
    ?软件小东(っㄩ?╊?ㄩc) 0
    2017/12/21 20:46:01

    这个我看很难成功

    回复
    长恨人心不如水 0
    2017/11/14 15:32:04
    热的与太阳肩并肩 0
    2017/7/24 10:26:47

    离孤独终老不远了

    回复
    zhuyuhao 0
    2017/7/20 13:19:06

    杀马特的别走!!

    <emoj> 回复
    独单あ心事い 0
    2017/7/13 8:57:34

    曾经的杀马特   现在转行写程序了么...

    回复
    SiriBen 0
    2017/6/18 9:44:13
    估计这个质感不容易脱单,哈哈哈 回复
    暂无,佳?? 0
    2017/6/10 13:02:14

    啊 我的眼睛!! 亮瞎了。。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复