Canvas-七夕爱心

七夕来临，最近正好在学习Canvas，所以做了一个七夕爱心，下面是演示图（转换的不清楚，不要太在意）。

下面放一张高清图：

特点：

1、会获取当前系统时间并在页面上显示。

2、跳动的小球是从白色爱心上一行一行跳动的，然后随机向右或向左运行，因为爱心是在左侧屏幕，所以看起来大部分小球都是向右跳动的。

3、优化了弹跳函数性能，避免小球过多吃内存问题，运行时可打开控制台查看小球数，程序会自动清理超过屏幕的小球。

4、相关代码已上传至我的资源，可供下载交流研究。

缺点：

1、因为主要是为了学习，所以没有增加页面自适应功能，可能会出现不同电脑画面位置不一样的情况，可自行增加页面自适应功能。

实现原理：

1、心形的实现：

首先用visio制作心形模型，我做的是15*14的宫格，如下图：

接下来将模型中的心形转换成JS二维数组，在程序中，有圆的宫格用1代替，没有圆的宫格用0代替，因此数组脚本代码如下：

我给数组JS脚本命名为：love15_14.js

lovegit=[
    //心形图形数组化
    //有心形代表1，没有心形代表0
    [0,0,1,1,1,0,0,0,0,0,1,1,1,0,0],
    [0,1,1,1,1,1,0,0,0,1,1,1,1,1,0],
    [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,0,1,1,1,1,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,1,1,0,0,0],
    [0,0,0,0,1,1,1,1,1,1,1,0,0,0,0],
    [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,1,0,0,0,0,0,0,0]
];

2、时间的实现：

这个很简单，new一个JS的Date()方法，然后解析即可得到时分秒。

3、文字的实现：

这个更简单，直接给一个变量附上字符串，后面在程序中会调用。

下面是实现脚本的代码，我在这里命名为：love.js

var WINDOW_WIDTH = 1690;
var WINDOW_HEIGHT = 780;
var RADIUS = 12;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
var count=0;
var balls=[];
const colors =['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00',
    '#669900','#FFBB33','#FF8800','#FF4444','#CC0000'];

const endTime = new Date(2018,7,17,23,59,55);//定义截止时间
var curShowTimeSeconds = 0;

window.οnlοad=function () {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  canvas.width = WINDOW_WIDTH;
  canvas.height = WINDOW_HEIGHT;
  curShowTimeSeconds = getCurrentShowTimeSeconds();

    setInterval(function () {
        render(context);
        update();
    },50);
};
function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime()-curTime.getTime();
    ret = Math.round(ret/1000);
    return ret>0?ret:0;
}
function update() {
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();

    var nextSeconds = nextShowTimeSeconds%60;
    var curSeconds = curShowTimeSeconds%60;
    if(nextSeconds != curSeconds){
        addLoves(MARGIN_LEFT,MARGIN_TOP);
        curShowTimeSeconds = nextShowTimeSeconds;
    }
    updateLoves();
    console.log(balls.length);
}
function render(cxt) {
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
    painting(cxt);
    renderLoveGit(MARGIN_LEFT,MARGIN_TOP,cxt);
    for(var i=0;i<balls.length;i++){
        cxt.fillStyle=balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,false);
        cxt.closePath();

        cxt.fill();
    }
}
//画七夕函数
function painting(cxt) {
    var time_now = new Date();
    var s_time = [time_now.getHours(),time_now.getMinutes(),time_now.getSeconds()];
    cxt.beginPath();
    cxt.font='100px Arial';
    // var grd = cxt.createLinearGradient(800,0,1200,0);
    // grd.addColorStop(0,'#33B5E5');
    // grd.addColorStop(0.1,'#0099CC');
    // grd.addColorStop(0.2,'#AA66CC');
    // grd.addColorStop(0.3,'#9933CC');
    // grd.addColorStop(0.4,'#99CC00');
    // grd.addColorStop(0.5,'#669900');
    // grd.addColorStop(0.6,'#FFBB33');
    // grd.addColorStop(0.7,'#FF8800');
    // grd.addColorStop(0.8,'#FF4444');
    // grd.addColorStop(0.9,'#9933CC');
    // grd.addColorStop(1,'#AA66CC');
    cxt.strokeStyle='white';
    cxt.strokeText(parseInt(s_time[0]/10)+''+parseInt(s_time[0]%10)+":"+parseInt(s_time[1]/10)+''+parseInt(s_time[1]%10)+':'+parseInt(s_time[2]/10)+''+parseInt(s_time[2]%10),800,220);
    cxt.closePath();
    cxt.beginPath();
    cxt.font='80px Arial';
    cxt.strokeText('祝天下有情人终成眷属,七夕快乐',350,400);
    cxt.closePath();
}
//更新小球的函数
function updateLoves() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;
        if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
            balls[i].y = WINDOW_HEIGHT - RADIUS;
            balls[i].vy = -balls[i].vy * 0.75;
        }
    }
    var cnt = 0;
    for(var i=0;i<balls.length;i++){
        if(balls[i].x+RADIUS>0 && balls[i].x-RADIUS<WINDOW_WIDTH)
            balls[cnt++]=balls[i];
    }
    while(balls.length>cnt){
        balls.pop();
    }
}
//加入一个小爱心
function addLoves(x,y) {
    // for(var i=0;i<14;i++){
        for(var j=0;j<15;j++){
            if(lovegit[count][j]==1){
                var aBall ={
                    x:x+j*2*(RADIUS+1)+(RADIUS+1),
                    y:y+count*2*(RADIUS+1)+(RADIUS+1),
                    g:1.5+Math.random(),//1.5~2.5之间
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*15, //取负4或正4
                    vy:-5,
                    color:colors[Math.floor(Math.random()*colors.length)]
                };
                balls.push(aBall);
            }
        }
        count++;
        if(count==14){
            count=0;
        }
    // }
}
function renderLoveGit(x,y,cxt) {
    cxt.fillStyle='white';
    for(var i=0;i<14;i++){
        for(var j=0;j<15;j++){
            if(lovegit[i][j]==1){
                cxt.beginPath();
                // colorSelect = colors[Math.floor(Math.random()*10)];
                // cxt.fillStyle=colorSelect;
                cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI,false);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

最后是背景图，我也上传上来给大家：命名为img_three.jpg

最后是HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七夕快乐</title>
    <style type="text/css" rel="stylesheet">
        canvas{
            background-image: url("./img/img_three.jpg");
        }
    </style>
</head>
<body>
<canvas id="canvas" style="border: solid 1px black;">
    您的浏览器不支持canvas，请更换浏览器后重新操作
</canvas>
<script src="js/love15_14.js"></script>  <!--引入爱心数组-->
<script src="js/love.js"></script>   <!--引入操作脚本-->
</body>
</html>

将上面的两个js文件和图片在HTML文件中正确引入即可实现七夕爱心跳动的效果。

在此祝各位程序员七夕快乐，没有女朋友写代码也是可以的哈。