HTML5+canvas一箭穿心

小戈&328

已于 2022-08-10 13:09:46 修改

阅读量4.1k

点赞数 8

分类专栏： web前端文章标签：表白神器 HTML5+canvas

于 2020-06-15 12:46:51 首次发布

本文链接：https://blog.csdn.net/qq_43220836/article/details/85945405

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表白神器

- - 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>