情人节表白神器

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

 2025  10  查看评论 (5)
情人节表白神器 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);
}
相关插件-动画效果

bezie curve 曲线动画

bezie curve 曲线动画
  动画效果
 7183  91

18种垂直分页导航按钮动画特效

这是一组效果非常炫酷的垂直分页导航按钮动画特效。这组特效通用18种效果,可以用于制作幻灯片、页面切换和其它容器组件切换的分页导航按钮
  动画效果
 5745  57

漂亮的翻书插件-BOOKBLOCK

今天我要给大家介绍一款模拟翻书的插件,BookBlock 为我们提供了一个翻页导航,让我们体验翻书的效果。任何内容都可以应用到该插件里面,比如图片和文字。该插件用到了jQuery++(对jquery有很多附加组件)。 接下来我们就来看看 BookBlock 的神奇效果吧。
  动画效果
 17092  69

全屏布局页转换jquery+css3

一个简单的响应一些花哨的页面布局与转换。我们的想法是初步显示四个项目和扩大它们。内物品添加一些额外的页面过渡。
  动画效果
 10198  55

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币

    Uncle 0
    2017/5/27 18:03:01

    厉害了,代码已经下载并部署到网站上了,就差一个女朋友了

    回复
    Lai~ Gema& 0
    2017/5/21 15:13:21

    好厉害

    厉害了

        楓顔楓語0
        2017/5/24 16:45:01
        好东西
        流年之外0
        2017/5/25 11:24:01
        减少程序猿单身数量
    回复
    答 案 0
    2017/5/21 15:07:04
取消回复