动态爱心的js代码（情人节程序员必备）

<script type="text/javascript">

//随机颜色

var colorArr = ["#212121", "#757575", "#A1D980", "#F0D56E", "#EE83AE", "#FFC2C2", "#F9A7B0"];

// 定义宽高，不足20整20变

var w = Math.max(20, Math.floor(Math.random() * 20)) * 20;

var h = Math.max(20, Math.floor(Math.random() * 20)) * 20;

// 创建心形初始状态

var r = w / 2;

var left = r;

var top = 0;

// 创建画布，将初始心形绘制出来

document.write("<canvas id='love' width='" + w + "' height='" + h + "'>您的浏览器不支持Canvas</canvas>");

var can = document.getElementById("love");

var ctx = can.getContext("2d");

ctx.fillStyle = colorArr[Math.floor(Math.random()*colorArr.length)];

ctx.beginPath();

ctx.arc(r, r, r, 0, Math.PI, true);

ctx.arc(r, r, r, Math.PI, 0, true);

ctx.closePath();

ctx.fill();

// 动态

setInterval(function(){

ctx.clearRect(0, 0, w, h);

top -= 0.3;

if (top < -(h/2)){

top = 0;

}

left += 0.15;

if (left > w/2){

left = r;

}

ctx.fillStyle = colorArr[Math.floor(Math.random()*colorArr.length)];

ctx.beginPath();

ctx.arc(left, top, r, 0, Math.PI, true);

ctx.arc(left,top, r, Math.PI, 0, true);

ctx.closePath();

ctx.fill();

},30)

</script>

---

关注小世学长不迷路，带你见识更多的小程序（小游戏）！！！