作为一个专业得程序员，咱们的表白怎能一个送花，几句情话了得，当然是要上代码啦！！！
表白神器
HTML5的canvas画一箭穿心
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Draw Heart</title> <style type="text/css"> * { margin: 0; padding: 0; } html { height: 100%; margin: 0; } body { height: 100%; background-color: white; } #canvasZone { width: 100%; height: 100%; text-align: center; background-color: black; } #myCanvas { height: 100%; display: block; /*background-color:aqua;*/ } .text { width: 220px; height: 520px; display: block; top: 70px; right: 50px; color: aqua; background-color: black; position: fixed; } </style> </head> <body> <div id="text" class="text"> </div> <div id="canvasZone"> <canvas id="myCanvas"></canvas> </div> <audio src="love.mp3" autoplay="autoplay"> Your browser does not support the audio element. </audio> </body> <script type="text/javascript"> var r = 3; var radian; //弧度 var i; var radianDecrement; //弧度增量 var time = 5; //每个点之间的时间间隔 var intervalId; var num = 360; //分割为 360 个点 var startRadian = Math.PI; var ctx; var startX = 100; var startY = 80; window.onload = function() { startAnimation(); setTimeout(function() { startX = 155; startY = 70; ctx.moveTo(startX, startY); drawHeart(); ctx.strokeStyle = "aqua" }, 2500); setTimeout(function() { textLove(); }, 6000); setTimeout(function() { ctx.strokeStyle = "red" addText(); }, 6000) } function textLove() { ctx.lineWidth = 2; var x = 40; var y = 100; ctx.moveTo(x, y); textLove = setInterval(function(){ ctx.lineTo(x, 110-0.25*x); x++; y++; ctx.stroke(); if(x==220){ clearInterval(textLove) } },10); setTimeout(function(){ ctx.strokeStyle = "aqua" ctx.lineTo(220, 55); ctx.lineTo(210, 50) ctx.moveTo(221, 55); ctx.lineTo(213, 65); ctx.stroke(); },1900); } function addText() { var context = "这里可以放一段告白得文字，把你想说得内容写下来，也就是告白得话！"; let arr = new Array(); arr = context.split(""); var str = ""; var index = 0; addText = setInterval(function() { str = document.getElementById("text").innerText; str += arr[index]; index++; document.getElementById("text").innerText = str; if (index == arr.length) { clearInterval(addText) } }, 120) } function startAnimation() { ctx = document.getElementById("myCanvas").getContext("2d"); //让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。 WINDOW_HEIGHT = document.documentElement.clientHeight - 20; WINDOW_WIDTH = document.documentElement.clientWidth - 20; ctx.width = WINDOW_WIDTH; ctx.heigh = WINDOW_HEIGHT; drawHeart(); } function drawHeart() { ctx.strokeStyle = "red"; ctx.lineWidth = 2; //设置线的宽度 radian = startRadian; //弧度设为初始弧度 radianDecrement = Math.PI / num * 2; ctx.moveTo(getX(radian), getY(radian)); //移动到初始点 i = 0; intervalId = setInterval("printHeart()", time); } function printHeart() { radian += radianDecrement; ctx.lineTo(getX(radian), getY(radian)); //在旧点和新点之间连线 i++; ctx.stroke(); //画线 if (i >= num) { clearInterval(intervalId); } } function getX(t) { //由弧度得到 X 坐标 return startX + r * (16 * Math.pow(Math.sin(t), 3)); } function getY(t) { //由弧度得到 Y 坐标 return startY - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); } </script> </html>
05-05
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
