愛就大膽說出來，不敢？那就用程式碼說出來！
阿新 • • 發佈：2018-12-01
轉載自本人GitHub
https://github.com/intflag/SayLOVE
執行效果
專案原始碼
- 採用canvas繪製，其中「心形」繪製程式碼來自網路，本人覺著挺有創意的就拿來改了改，然後送給女神了，哈哈！！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color = "#2e2e2e"; } </style> </HEAD> <BODY style=" background-color: #000;"> <canvas id="heart"></canvas> <script> window.requestAnimationFrame = window.__requestAnimationFrame || window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || (function () { return function (callback, element) { var lastTime = element.__lastTime; if (lastTime === undefined) { lastTime = 0; } var currTime = Date.now(); var timeToCall = Math.max(1, 33 - (currTime - lastTime)); window.setTimeout(callback, timeToCall); element.__lastTime = currTime + timeToCall; }; })(); window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase())); var loaded = false; var init = function () { if (loaded) return; loaded = true; var mobile = window.isDevice; var koef = mobile ? 0.5 : 1; var canvas = document.getElementById('heart'); var ctx = canvas.getContext('2d'); var width = canvas.width = koef * innerWidth; var height = canvas.height = koef * innerHeight; var rand = Math.random; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, width, height); var heartPosition = function (rad) { //return [Math.sin(rad), Math.cos(rad)]; return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))]; }; var scaleAndTranslate = function (pos, sx, sy, dx, dy) { return [dx + pos[0] * sx, dy + pos[1] * sy]; }; window.addEventListener('resize', function () { width = canvas.width = koef * innerWidth; height = canvas.height = koef * innerHeight; ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, width, height); }); var traceCount = mobile ? 20 : 50; var pointsOrigin = []; var i; var dr = mobile ? 0.3 : 0.1; for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0)); for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0)); for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0)); var heartPointsCount = pointsOrigin.length; var targetPoints = []; var pulse = function (kx, ky) { for (i = 0; i < pointsOrigin.length; i++) { targetPoints[i] = []; targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2; targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2; } }; var e = []; for (i = 0; i < heartPointsCount; i++) { var x = rand() * width; var y = rand() * height; e[i] = { vx: 0, vy: 0, R: 2, speed: rand() + 5, q: ~~(rand() * heartPointsCount), D: 2 * (i % 2) - 1, force: 0.2 * rand() + 0.7, f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)", trace: [] }; for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y}; } var config = { traceK: 0.4, timeDelta: 0.01 }; var time = 0; var textLeft1 = 0; var textLeft2 = -10; var loop = function () { //設定字型填充顏色 ctx.fillStyle = "red"; //設定字型樣式 ctx.font = "48px 楷體"; ctx.fillText("I LOVE YOU - 寶貝", 460, 120); ctx.font = "26px 楷體"; //從座標點(50,50)開始繪製文字 var mLeft = 50; var mTop = 250; //左側文字 ctx.fillStyle = "red"; ctx.fillText("我愛你，沒有什麼目的，只是愛你。", mLeft, mTop); ctx.fillText("一輩子，就做一次自己。", mLeft, mTop + 50); ctx.fillText("這一次，我想給你全世界；", mLeft, mTop + 100); ctx.fillText("這一次，遍體鱗傷也沒關係；", mLeft, mTop + 150); ctx.fillText("這一次，用盡所有的勇敢；", mLeft, mTop + 200); ctx.fillText("這一次，可以什麼都不在乎。", mLeft, mTop + 250); ctx.fillText("但只是這一次就夠了。", mLeft, mTop + 300); ctx.fillText("因為生命再也承受不起這麼重的愛情。", mLeft, mTop + 350); //右側標籤 ctx.font = "60px 楷體"; ctx.fillStyle = "#ff00ff"; ctx.fillText("未來", 1000, 300); ctx.font = "45px 楷體"; ctx.fillStyle = "#ccbe06"; ctx.fillText("勇敢", 900, 500); ctx.font = "50px 楷體"; ctx.fillStyle = "#00ffff"; ctx.fillText("真心", 1100, 600); ctx.font = "38px 楷體"; ctx.fillStyle = "#3d85c6"; ctx.fillText("堅持", 1150, 400); ctx.font = "38px 楷體"; ctx.fillStyle = "#ffffff"; ctx.fillText("白頭", 1200, 200); var n = -Math.cos(time); pulse((1 + n) * .5, (1 + n) * .5); time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta; ctx.fillStyle = "rgba(0,0,0,.1)"; ctx.fillRect(0, 0, width, height); for (i = e.length; i--;) { var u = e[i]; var q = targetPoints[u.q]; var dx = u.trace[0].x - q[0]; var dy = u.trace[0].y - q[1]; var length = Math.sqrt(dx * dx + dy * dy); if (10 > length) { if (0.95 < rand()) { u.q = ~~(rand() * heartPointsCount); } else { if (0.99 < rand()) { u.D *= -1; } u.q += u.D; u.q %= heartPointsCount; if (0 > u.q) { u.q += heartPointsCount; } } } u.vx += -dx / length * u.speed; u.vy += -dy / length * u.speed; u.trace[0].x += u.vx; u.trace[0].y += u.vy; u.vx *= u.force; u.vy *= u.force; for (k = 0; k < u.trace.length - 1;) { var T = u.trace[k]; var N = u.trace[++k]; N.x -= config.traceK * (N.x - T.x); N.y -= config.traceK * (N.y - T.y); } ctx.fillStyle = u.f; for (k = 0; k < u.trace.length; k++) { ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1); } } //ctx.fillStyle = "rgba(255,255,255,1)"; //for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2); window.requestAnimationFrame(loop, canvas); }; loop(); }; var s = document.readyState; if (s === 'complete' || s === 'loaded' || s === 'interactive') init(); else document.addEventListener('DOMContentLoaded', init, false); </script> </BODY> </HTML>