HTML5+canvas一箭穿心

表白神器

HTML5的canvas画一箭穿心

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>

HTML5+canvas一箭穿心相关推荐

html5+canvas+九宫格,HTML5+canvas一箭穿心
表白神器 HTML5的canvas画一箭穿心作为一个专业得程序员,咱们的表白怎能一个送花,几句情话了得,当然是要上代码啦!!! Draw Heart * { margin: 0; padding: ...
html li 右跟下有倒影,HTML5 canvas实现的下雨夜湖面星空倒影动画特效
HTML5 CANVAS 下雨夜的湖面星空倒影 * { margin: 0; padding: 0; border: 0; background: #000 } canvas { position: ...
html5 canvas雨点打到窗玻璃动画
html5 canvas雨点打到窗玻璃动画 HTML5下雨效果效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: 1 <!doctype h ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
Html5 Canvas 扫雷 (IE9测试通过)
扫雷是一个非常经典的游戏,记得在第一次接触的windows 3.22 上就有扫雷了,到现在的Win7,依然保留着这个经典的游戏,结合Html5 Canvas,模仿Win7的UI,将老板扫雷进行了升级. ...
HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
html5 canvas 加载图片
html5 canvas 加载图片视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...
html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信（下）
在上篇博文<Html5:Canvas+WebSocket实现远程实时通信(上)>中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现We ...

HTML5+canvas一箭穿心

表白神器

HTML5的canvas画一箭穿心

HTML5+canvas一箭穿心相关推荐

最新文章

热门文章