canvas绘制爱心

风舞红枫

已于 2022-03-19 15:00:28 修改

阅读量2.1k

点赞数 2

分类专栏： canvas 文章标签： canvas

于 2021-03-05 09:37:00 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114383268

版权

canvas 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

无图不欢，先上图

<!DOCTYPE html>
<html>
<head>
	<meta name="keywords" content="风舞红枫,前端技术,canvas"/>
	<meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
	<meta charset="utf-8">
	<link rel="icon" href="../image/icon2.ico">
	<title>love you</title>
	<style type="text/css">
		html,body{
			height:100%;
			margin:0;
			padding:0;
			background-color:#111;
		}
		canvas{
			display:block;
		}
		.top{
			position:absolute;
			top:0;
			left:0;
		}
	</style>
</head>
<body>
<canvas></canvas>
<canvas class="top"></canvas>
</body>
<script type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight ;

var canvas = document.getElementsByTagName('canvas')[0];
var canvas1 = document.getElementsByTagName('canvas')[1];
canvas.width = width;
canvas.height = height;
canvas1.width = width;
canvas1.height = height;

var context = canvas.getContext('2d');
var context1 = canvas1.getContext('2d');

var Style = context.createLinearGradient(0,0,width,0);
Style.addColorStop(0,"Skyblue");
Style.addColorStop(1,"pink");
var Style1 = context1.createLinearGradient(0,0,width,0);
Style1.addColorStop(0,"Skyblue");
Style1.addColorStop(1,"pink");

var leftI = 2;
var rightI = 2;
var leftInterval = setInterval(function(){
	var obj = loveCurve(2*Math.PI*(leftI/60),10);
	heart(context,rand(6,8)/10,width/4,height/4,obj.x*1.4,obj.y*1.4,Style);
	leftI += 1;
	if(leftI == 29){
		leftI += 4;
	}
	if(leftI == 59){
		clearInterval(leftInterval);
		var rightInterval = setInterval(function(){
			var obj = loveCurve(2*Math.PI*(rightI/60),10);
			heart(context,rand(4,8)/10,width/4+200,height/4,obj.x*1.4,obj.y*1.4,Style);
			rightI += 1;
			if(rightI == 29){
				rightI += 4;
			}
			if(rightI == 59){
				clearInterval(rightInterval);
				arrow();
				
			}
		},20)
	}
},20)

var hotArr = [];
var text = "LOVE";
var hotInterval = setInterval(function(){
	if(rand(-19,19) == 1 && hotArr.length < 2){
		hotArr.push([2,rand(30,width-30),height,text[rand(0,text.length-1)]]);
	}
	context1.clearRect(0,0,width,height);
	context1.font="30px Verdana";
	for(var i = 0 ; i < hotArr.length ; i++){
		heart(context1,hotArr[i][0],hotArr[i][1],hotArr[i][2],0,0,Style1);
		context1.fillStyle = Style1;
		context1.fillRect(hotArr[i][1]+85,hotArr[i][2]+90,30,30);
		context1.fillStyle = "violet";
		context1.fillText(hotArr[i][3],hotArr[i][1]+90,hotArr[i][2]+115);
		hotArr[i][2] -= 3;
		if(hotArr[i][2] <= -20){
			hotArr.splice(i,1);
			i--;
		}
	}
},30)


function arrow(){
	context.beginPath();
	context.lineWidth = 4;
	context.strokeStyle = Style;
	context.lineCap = 'round';
	context.lineJoin = 'round';
	var arrowI = 0;
	var arrowX = width/4*3.4 - width/4*0.6;
	var arrowY = height/4*3 - height/4*1;
	var arrowInterval = setInterval(function(){
		context.lineTo(width/4*3.4-arrowX*arrowI/10,height/4*1+arrowY*arrowI/10);
		context.lineTo(width/4*3.4-arrowX*(arrowI+1)/10,height/4*1+arrowY*(arrowI+1)/10);
		context.stroke();
		arrowI += 1;
		if(arrowI == 10){
			clearInterval(arrowInterval);
			context.lineTo(width/4*0.6,height/4*3);
			context.lineTo(width/4*0.6+20,height/4*3-32);
			context.stroke();
			context.lineTo(width/4*0.6,height/4*3);
			context.lineTo(width/4*0.6+30,height/4*3+12);
			context.stroke();
		}
	},20)
	context.closePath();
}

function heart(context,r,scaleX,scaleY,x,y,color){
	context.beginPath();
	context.strokeStyle = color;
	context.fillStyle = color;
	for(var i = 0 ; i <= 360 ; i++){
		var obj = loveCurve(2*Math.PI*(i/360),r);
		context.lineTo(obj.x+scaleX+x,(obj.y+scaleY+y).toFixed(2));
		context.stroke();
	}
	context.fill();
	context.closePath();
}

//爱心曲线	t的取值范围是0到2*Math.PI。
function loveCurve(t,r){
	var obj = {
		x : 100 + r * (16 * Math.pow(Math.sin(t), 3)),
		y : 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
	}
	return obj;
}

function rand(n,m){
	var c = m - n + 1;
	return Math.floor(Math.random() * c + n);
}
</script>
</html>