js形成心形效果

最新推荐文章于 2024-05-19 08:45:33 发布

sun-shadow

最新推荐文章于 2024-05-19 08:45:33 发布

阅读量8.2k

点赞数 1

分类专栏： JavaScript web前端 HTML5

本文链接：https://blog.csdn.net/u013494746/article/details/40215505

版权

这篇博客展示了如何使用JavaScript和HTML5 Canvas来创建一个动态的心形图案。通过定义函数和坐标计算，绘制了心形的轮廓，并添加了动画效果，使得点沿着心形路径移动，形成心形动画。同时，代码中还包含了一种在心形中央添加文字的方法。

摘要由CSDN通过智能技术生成

<body>
	<canvas class = "canvas"></canvas>	
	<script>
		var S = {
			start: function(){
				Draw.init();
				//Draw.drawRadial();
				Shape.switchShape(Shape.drawHeart());
			  Draw.loop(function(){
				Shape.render();
				});
				}
			
			};
		Point = function(args){
			this.x = args.x;
			this.y = args.y;
			this.z = args.z;
			this.a = args.a;
			};
		Dot = function(x,y){
			this.p = new Point({
				x:x,
				y:y,
				z:5,
				a:1,
				h:0
				});
			this.e = 0.07;
			this.s = true;
			this.t = this.clone();
			this.q = [];
			};
Dot.prototype = {
			clone: function(){
				return new Point({
						x: this.x,
						y: this.y,
						z: this.z,
						a: this.a,
						h: this.h
						});
				},
			move: function(p){
				this.q.push(p);
				},
			moveTowards: function(n){
				var dx = this.p.x - n.x,
						dy = this.p.y - n.y,
						dl = Math.sqrt(dx * dx &#

最低0.47元/天解锁文章

sun-shadow

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js形成心形效果

var S = { start: function(){ Draw.init(); //Draw.drawRadial(); Shape.switchShape(Shape.drawHeart()); Draw.loop(function(){ Shape.render(); }); } }; Point = fun
复制链接

扫一扫

专栏目录