HTML画出心形

最新推荐文章于 2024-07-20 16:00:35 发布
最新推荐文章于 2024-07-20 16:00:35 发布
阅读量2.1w 收藏 55
点赞数 13
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44261821/article/details/100697940
版权

心形一


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#MyCanvas {
				border: 1px solid lightblue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var ctx = document.getElementById("MyCanvas").getContext("2d");
				ctx.width = document.documentElement.clientWidth-20;
				ctx.height = document.documentElement.clientHeight-20;
				var r = 4;

				function drawHeart() {
					var num = 40; //分割为360个点绘制
					var redian;
					var startRedian = Math.PI;
					var redianDecrement;
					var i = 0;
					var time = 100;
					ctx.strokeStyle = "red";
					ctx.lineWidth = 2;
					redian = startRedian;
					redianDecrement = 2 * Math.PI / num;
					ctx.moveTo(getX(redian), getY(redian));
					var intervalId = setInterval(function(){
						redian += redianDecrement;
						ctx.lineTo(getX(redian), getY(redian));
						i++;
						ctx.stroke();
						if (i >= num) {
							clearInterval(intervalId);
						}
					}, time);
					ctx.font = "30px 宋体";
 					ctx.strokeText("子寒", 120, 222);
					ctx.strokeText("芳芳", 600, 222);
				}
			
				function getX(t) {
					return 400 + r * (16 * Math.pow(Math.sin(t), 3));
				}
				
				function getY(t) {
					return 200 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
				}
				drawHeart();
			}
			
		</script>
	
	</head>
	<body>
		<canvas id="MyCanvas" width="800" height="800"></canvas>
	</body>
</html>

心形二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	
	<script type="text/javascript">
		var can=document.getElementById("can");
		var ctx=can.getContext("2d");
		var x=200;
		var y=100;
		
		var x1=250;
		var y1=100;
		
		setInterval(function(){
			
		//	ctx.clearRect(0,0,800,600);
			
			ctx.beginPath();
			ctx.lineWidth=2;
			ctx.strokeStyle="red";  
			ctx.rect(x,y,2,2);
			if(x>=200 && x<=250 && y>=50 && y<=100)
			{
			x+=1;
			y-=1;
			}
			if(x>=250 && x<=300 && y>=50 && y<=100)
			{
				x+=1;
				y+=1;
			}
			if(x>=200 && x<=300 && y>=100 && y<=200)
			{
				x-=1;
				y+=1;
			}
			if(x>=100 && x<=200 && y>=100 && y<=200)
			{
				x-=1;
				y-=1;
			}
			if(x>=100 && x<=150 && y>=50 && y<=100)
			{
				x+=1;
				y-=1;
			}
			if(x>=150 && x<=200 && y>=50 && y<=100)
			{
				x+=1;
				y+=1;
			}
			 			
			ctx.closePath();
			ctx.stroke(); 
			  
		},10);
	</script>
	
</html>

心形三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	
	<script type="text/javascript">
		var can=document.getElementById("can");
		var ctx=can.getContext("2d");
		var x=200;
		var y=100;
		
		var x1=250;
		var y1=100;
		
		setInterval(function(){
			
		//	ctx.clearRect(0,0,800,600);
			
			 
			
			ctx.beginPath();
			ctx.arc(250,100,50,-180*Math.PI/180,45*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			 
			
			ctx.beginPath();
			ctx.arc(150,100,50,-215*Math.PI/180,0*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath(); 
			ctx.lineTo(285,135);
			ctx.lineTo(200,230);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath(); 
			ctx.lineTo(109,129);
			ctx.lineTo(200,230);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			 
		ctx.font = "40px 华文隶书";
		ctx.strokeText("子寒", 160, 160); 
			
			
		},10);
	</script>
	
</html>


心形美少女

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	
	<script type="text/javascript">
		var can=document.getElementById("can");
		var ctx=can.getContext("2d");
		 
		
		setInterval(function(){
			
		//	ctx.clearRect(0,0,800,600);
			
			 
			
			ctx.beginPath();
			ctx.arc(250,100,50,-180*Math.PI/180,45*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			 
			
			ctx.beginPath();
			ctx.arc(150,100,50,-215*Math.PI/180,0*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath(); 
			ctx.lineTo(285,135);
			ctx.lineTo(200,230);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath(); 
			ctx.lineTo(109,129);
			ctx.lineTo(200,230);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			//左眉毛
			ctx.beginPath();
			ctx.arc(150,120,20,-150*Math.PI/180,-30*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			//左眼
			ctx.beginPath();
			ctx.arc(150,130,15,-150*Math.PI/180,-30*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
		 	
			ctx.beginPath();
			ctx.arc(150,115,15,30*Math.PI/180,150*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			//眼珠
			ctx.beginPath();
			ctx.arc(150,120,5,0*Math.PI/180,360*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			
			//右眉毛
			ctx.beginPath();
			ctx.arc(250,120,20,-150*Math.PI/180,-30*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
		 	
			ctx.beginPath();
			ctx.arc(250,130,15,-150*Math.PI/180,-30*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			ctx.beginPath();
			ctx.arc(250,115,15,30*Math.PI/180,150*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			//眼珠
			ctx.beginPath();
			ctx.arc(250,120,5,0*Math.PI/180,360*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
			
			
			
			//嘴巴
			ctx.beginPath();
			ctx.arc(200,170,20,30*Math.PI/180,150*Math.PI/180);
			ctx.strokeStyle="red";
		//	ctx.closePath();
			ctx.stroke();
		 
			
		},10);
	</script>
	
</html>
海棠A
关注
专栏目录
html爱心特效代码
梦游星海的博客
10-26 44万+
<!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="Keywor...
HTML实现的心型代码
11-18
可自定义添加照片 内容简便，只包含有一个html文件 内含CSS，JS等 爱心的HTML实现，可用于表白
html爱心
weixin_35750953的博客
12-17 5251
HTML爱心是一种利用HTML语言创建的爱心形状图案。它可以通过使用HTML标签和CSS样式在网页上呈现出来。 要创建HTML爱心，可以使用HTML标签<div>和<span>来分别表示爱心的两个半圆。可以使用CSS样式控制这些标签的形状、大小、颜色等属性，从而达到创建爱心的目的。 例如，可以使用以下代码来创建一个爱心： <style> .heart { ...
HTML（零基础到成神）
2301_79842152的博客
07-20 811
title属性里设置的是鼠标悬停在图片上显示的。默认情况下（不设置name属性时），是点了几个 checkbox 就有几个 checkbox 被选中，所以严格来说，要实现 checkbox 的“单选”，就只能点击一个 checkbox，如果点击了多个 checkbox，就必有相应个数的 checkbox 被选中。如果有三个 radio 按钮，前两个的 name 属性的值是一样的，但第三个和前两个不一样，则前两个 radio 按钮，只能同时选中一个，第三个 radio 按钮可以和第一个或第二个同时被选中。
用html画出爱心
xieixnxia的博客
04-24 1万+
用html写出的爱心 软件：Sublime Text3 思想：在一个盒子中嵌套两个矩形，将矩形上部做成圆角，各向左向右旋转45度。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>白鹿为霜</title> <style type="text/css"> body{ margin: 0;/*外边距 上下 左右*/
HTML5动态心形动画
03-11
本压缩包需要7—zip解压！ 资源内容为HTML5制作的一个动态的心形HTML5动画
HTML 动画效果（爱心）
03-24
HTML 动画效果（爱心）学习必备，程序员 女朋友必备，。
爱心源码-JavaScript+HTML5画布心形动画源码下载
12-16
在本项目中，“爱心源码-JavaScript+HTML5画布心形动画源码下载”是一个使用现代Web技术实现的互动艺术作品。这个项目利用了JavaScript和HTML5的Canvas API来绘制并动态更新一个心形动画。让我们深入探讨一下这个...
HTML心形动态满屏爱心代码
02-20
HTML心形动态满屏爱心代码是一种利用HTML、CSS和JavaScript技术来创建的视觉效果，它能够在网页上展示出不断飘动的爱心，营造出浪漫和趣味的氛围。这个压缩包中包含的文件很可能是实现这一效果的具体源码，让我们...
HTML5 canvas飘动爱心心形动画
05-01
HTML5 canvas是现代网页开发中的一个强大工具，它允许开发者...通过调整`Heart`构造函数中的属性和动画循环中的参数，你可以轻松地修改动画效果，比如改变心形的颜色、大小、飘动速度等，创造出更加个性化的动画场景。
html5心形动画跟随鼠标光标运动特效.zip
07-11
<!doctype html> <html> <head>... html5心形动画跟随鼠标光标运动特效，html5 canvas绘制心形动画，鼠标移动时组合成心形的线条动画会散开跟随鼠标运动，当鼠标停下来后又重新组合成心形。
html爱心页面
11-06
我能抽象出整个世界．．． 但是我不能抽象出你．．． 因为你在我心中是那么的具体．．． 所以我的世界并不完整．．． 我可以重载甚至覆盖这个世界里的任何一种方法．．． 但是我却不能重载对你的思念．．． 也许命中注定了 你在我的世界里永远的烙上了静态的属性．．． 而我不慎调用了爱你这个方法．．． 当我义无返顾的把自己作为参数传进这个方法时．．． 我才发现爱上你是一个死循环．．． 它不停的返回对你的思念压入我心里的堆栈．．． 在这无尽的黑夜中．．． 我的内存里已经再也装不下别人．．． 我不停的向系统申请空间．．． 但却捕获一个异常－－－我爱的人不爱我．．． 为了解决这个异常．．． 我愿意虚拟出最后一点内存．．． 把所有我能实现的方法地址压入堆栈．．． 并且在栈尾压入最后一个方法－－－将字符串＂我爱你，你爱我吗？＂传递给你．．． 如果返回值为真－－我将用尽一生去爱你．．． 否则－－我将释放掉所有系资源．
爱心网页-HTML-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
html5 CSS3心形动画跟随鼠标光标运动特效.zip
07-11
代码片段： this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; ...// Move points over time ..._this.radians = _this.velocity;..._this.lastMouse.x = (mouse.x - _this.lastMouse.x) * ...
html+css制作心形
weixin_47684422的博客
03-20 9525
学习过html和css之后我们可以尝试做一些小效果，比如说制作心形图案。 效果大概就像是这样 整体形状我们可以理解为一个正方形，在它的上边和右边分别创建一个圆形，最后再将整体旋转就可以做成一个爱心的效果了 原理大概就是如此，只需要我们将最后的颜色全部调成一个颜色，再整体旋转45度就可以了。 下面我们附上具体代码，我提供了两种方式，第一种是使用伪类元素来做，第二种是在一个div里面设置两个span标签。 方法一： <div class="one"></div> .one{
html+css+js爱心代码
热门推荐
jiangcr123的博客
11-06 1万+
最近好像爱心代码很火
帮我画个爱心用html
weixin_42581003的博客
01-05 293
可以使用 HTML 的 <svg> 元素和 <path> 元素来创建一个爱心图形。 例如，下面的代码可以用来创建一个红色的爱心图形： <svg width="100" height="100"> <path d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30...
在html中加入css画心,用CSS3画一个爱心
weixin_32004383的博客
05-31 1328
实现效果需求/功能:怎么用CSS+HTMl绘画出一个爱心.分析:爱心可以通过一个正方形+两个圆形组合成.先画一个正方形+圆形, 摆放位置如下:再添加上一个圆形.最后再将整个图形顺时针旋转45度即可.初步实现:先画一个正方形:#heart{height: 300px;width: 300px;border: 2px solid black;}给这个正方形的左边加行一个圆形.这里使用伪类:before...
使用html画爱心
ddtzlbxr38191的博客
02-07 3956
<!DOCTYPE html"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>网页</title> <style type="text/css"> ...
用html画出浪漫的心形
最新发布
09-20
要用HTML直接画出一个标准的心形图案并不是特别直观，因为HTML主要是用于显示结构化内容的语言，并非图形绘制工具。不过你可以通过CSS的伪元素（`:before`和`:after`）和一些简单的SVG或者是利用CSS的边框（border-radius）配合实现一个基础的心形。这里是一个基本的例子，使用HTML和CSS： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .heart { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } .heart:before, .heart:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-width: 50px 0; border-style: solid; border-color: transparent transparent red transparent; } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 这个例子创建了一个红色心形，如果你想要其他颜色，只需更改`.heart`中`border-bottom`的颜色即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值