心形，我心飛揚，滑動鼠標出現心形軌跡
<!doctype html> <html> <head> <meta charset="utf-8"> <title>心形，我心飛揚</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> body { margin:0; overflow:hidden; background:#303035; } </style> </head> <body> <canvas></canvas>
<script> var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); //初始化頁面新的數量 var num = 10; var ww = window.innerWidth; var wh = window.innerHeight;
var hearts = [];
function init() { requestAnimationFrame(render); canvas.width = ww; canvas.height = wh; for (var i = 0; i < num; i++) { hearts.push(new Heart()); } // console.log(hearts) } var timeaur; $("body").on("mousedown", function(event) { var e = event || window.event; var x = e.clientX, y = e.clientY; timeaur = setInterval(function() { console.log(123123) hearts.push(new Heart(x, y)); num++ }, 100) $("body").on("mousemove", function(event) {
var e = event || window.event; var x = e.clientX, y = e.clientY; hearts.push(new Heart(x, y)); num++ }) })
$("body").on("mouseup", function() { clearInterval(timeaur) $("body").off("mousemove") })
function Heart(x, y) { if (x) { this.x = x; this.y = y; } else { this.x = Math.random() * ww; this.y = Math.random() * wh; }
this.opacity = (Math.random() * 0.5) + 0.5; this.vel = { x: (Math.random() - 0.5) * 4, y: (Math.random() - 0.5) * 4 }; this.targetScale = (Math.random() * 0.15) + 0.02; this.scale = this.targetScale * Math.random(); }
Heart.prototype.update = function() { this.x += this.vel.x; this.y += this.vel.y;
this.scale += (this.targetScale - this.scale) * 0.01; if (this.x - this.width > ww || this.x + this.width < 0) { this.scale = 0; this.x = Math.random() * ww; } if (this.y - this.height > wh || this.y + this.height < 0) { this.scale = 0; this.y = Math.random() * wh; } this.width = 473.8 * this.scale; this.height = 408.6 * this.scale; } Heart.prototype.draw = function() { ctx.globalAlpha = this.opacity; ctx.drawImage(heartImage, this.x - this.width * 0.5, this.y - this.height * 0.5, this.width, this.height); }
function render() { ctx.clearRect(0, 0, ww, wh); // ctx.globalAlpha = 1; // ctx.fillStyle = "rgba(255,255,255,0.3)"; // ctx.fillRect(0, 0, ww, wh); for (var i = 0; i < num; i++) { hearts[i].update(); hearts[i].draw(); } requestAnimationFrame(render); }
var heartImage = new Image(); heartImage.onload = init(); heartImage.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";
window.addEventListener("resize", function() { ww = window.innerWidth; wh = window.innerHeight; }) </script>
</body> </html>