情人节你们过，表白代码我来写（HTML+CSS+JS）

转x33g5p2x  于2022-02-14 转载在 HTML5  
字(6.1k)|赞(0)|评价(0)|浏览(458)

雷迪森安的乡亲们，欢迎来到老实人的前端课堂，这情人节的，我把爱心都给你们准备好了，今天我们来写个爱心吧。

正片

注意看到最后哦，下面还有一个更好看的特效，这个是个动态的♥♥

结构就两行

  1. <script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
  2. <canvas id="canvas"></canvas>

样式

以下样式大部分是js代码渲染上dom后表现出来的

  1. body {
  2.     margin: 0;
  3.     font-family: Helvetica, Arial;
  4.     font-weight: 100;
  5.     overflow: hidden;
  6. }
  7. canvas {
  8.     background-color: rgb(244, 244, 244);
  9. }
  10. footer {
  11.     position: fixed;
  12.     bottom: 0;
  13.     width: 100%;
  14. }
  15. footer img {
  16.     border-radius: 100%;
  17.     width: 30px;
  18.     height: 30px;
  19.     margin-left: 10px;
  20. }
  21. footer span {
  22.     display: block;
  23.     padding: 10px;
  24.     display: flex;
  25.     justify-content: flex-end;
  26.     align-items: center;
  27. }

表现

关键代码，满满注释哦，这我可够意思了哈，不懂的话再私下问我吧。

  1. //---------- MAIN FUNCTION ----------
  2. function init() {
  3.     renderable = [];
  4.     path = new Shape(new Heart(), new Point(cw / 2, ch / 2), new Color(244, 244, 244, 1), {
  5.         scale: 10
  6.     });
  8.     animate();
  9. }
  11. function animate() {
  12.     addShape(angle);
  13.     addShape(angle2);
  14.     angle += 0.05;
  15.     angle2 -= 0.05;
  17.     ctx.clearRect(0, 0, cw, ch);
  19.     for (var i = 0; i < renderable.length; i++) {
  20.         renderable[i].draw(canvas);
  21.         if (renderable[i].scale <= 0) renderable.splice(i, 1);
  22.     }
  23.     path.draw(canvas);
  24.     requestAnimationFrame(animate);
  25. }
  27. function addShape(angle) {
  29.     renderable.push(new Shape(new Circle(5), new Point(cw / 2, ch / 2), new Color(253, 192, 192, 1), {
  30.         position: (((path.geometry.getPositionByAngle(angle)).multiply(path.scale)).add(path.position.clone())),
  31.         decay: 0.1,
  32.         scale: 3
  33.     }));
  34. }
  36. //-----------------------------------
  37. var canvas, ctx, cw, ch;
  38. var FPS = 60;
  39. var renderable = [],
  40.     path,
  41.     path2,
  42.     angle = 0,
  43.     angle2 = 0,
  44.     color;
  46. var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
  47.     return setTimeout(callback, FPS);
  48. };
  50. window.onload = function() {
  51.     initCanvas();
  52.     ctx.clearRect(0, 0, cw, ch);
  53.     init();
  55. }
  56. window.onresize = function() {
  57.     initCanvas();
  58.     ctx.clearRect(0, 0, cw, ch);
  59. };
  61. function initCanvas() {
  62.     canvas = document.getElementById('canvas');
  63.     ctx = canvas.getContext('2d');
  64.     cw = window.innerWidth;
  65.     ch = window.innerHeight;
  66.     canvas.width = cw;
  67.     canvas.height = ch;
  68. }
  70. //---------------- APP UTIL ------------------
  71. function getRandomNumber(min, max) {
  72.     return Math.random() * (max - min + 1) + min;
  73. }
  75. //---------- EXTRACT OF MY NEXT FRAMEWORK ------------
  76. //----------- PROTOTYPES -------------
  77. //===== GEOMETRY =====
  78. //----- SHAPE -----
  79. function Shape(geometry, position, color, properties) {
  80.     this.position = (position == null || position.classname != "Point") ? new Point() : position;
  81.     this.geometry = (geometry == null || geometry.constructor.name != "GenericObject") ? new Circle() : geometry;
  82.     this.color = (color == null || color.classname != "Color") ? null : color;
  83.     this.lineColor = null;
  84.     this.lineWidth = 1;
  85.     this.scale = 1;
  86.     this.decay = 0;
  87.     if (properties != null) this.setProperties(properties);
  88.     GenericObject.call(this, "Shape");
  89. }
  90. Shape.prototype = new GenericObject();
  91. Shape.prototype.setProperties = function(properties) {
  92.     for (var p in properties) {
  93.         this[p] = properties[p];
  94.     }
  95. }
  96. Shape.prototype.draw = function(canvas) {
  97.     if (this.scale > 0) {
  98.         var ctx = canvas.getContext('2d');
  99.         var cw = canvas.width;
  100.         var ch = canvas.height;
  102.         ctx.beginPath();
  103.         if (this.lineWidth > 0 && (this.lineColor != null && this.lineColor.classname == "Color")) {
  104.             ctx.strokeStyle = this.lineColor.getRGBA();
  105.             ctx.lineWidth = this.lineWidth;
  106.         }
  107.         if (this.color != null && this.color.classname == "Color") {
  108.             ctx.fillStyle = this.color.getRGBA();
  109.         }
  111.         switch (this.geometry.classname) {
  112.             case "Circle":
  113.                 ctx.arc(this.position.x, this.position.y, this.geometry.radius * this.scale, 0, Math.PI * 2);
  114.                 break;
  115.             case "Heart":
  116.                 for (var i = 0; i < Math.PI * 2; i += 0.05) {
  117.                     var p = this.geometry.getPositionByAngle(i);
  118.                     p.multiply(this.scale);
  119.                     p.add(this.position);
  120.                     if (i == 0) ctx.moveTo(p.x, p.y);
  121.                     else ctx.lineTo(p.x, p.y);
  122.                 }
  123.                 break;
  124.         }
  126.         if (this.lineColor != null && this.lineColor.classname == "Color") ctx.stroke();
  127.         if (this.color != null) ctx.fill();
  128.         this.scale -= this.decay;
  129.     }
  130. }
  132. //----- POINT -----
  133. function Point(x, y) {
  134.     this.x = (x != null && !isNaN(x)) ? x : 0;
  135.     this.y = (y != null && !isNaN(y)) ? y : 0;
  136.     GenericObject.call(this, "Point");
  137. }
  138. Point.prototype = new GenericObject();
  139. Point.prototype.add = function(p2) {
  140.     if (p2.classname != this.classname) return null;
  141.     this.x += p2.x;
  142.     this.y += p2.y;
  143.     return this;
  144. }
  145. Point.prototype.multiply = function(scale) {
  146.     this.x *= scale;
  147.     this.y *= scale;
  148.     return this;
  149. }
  151. //----- CIRCLE -----
  152. function Circle(radius) {
  153.     this.center = new Point();
  154.     this.radius = (radius != null && !isNaN(radius)) ? radius : 1;
  155.     GenericObject.call(this, "Circle");
  156. }
  157. Circle.prototype = new GenericObject();
  159. //----- HEART -----
  160. function Heart(scale) {
  161.     this.scale = (scale != null && !isNaN(scale)) ? scale : 1;
  162.     GenericObject.call(this, "Heart");
  163. }
  164. Heart.prototype = new GenericObject();
  165. Heart.prototype.getPositionByAngle = function(angle) {
  166.     if (angle == null || isNaN(angle)) return null;
  167.     var x = 16 * Math.pow(Math.sin(angle), 3);
  168.     var y = -(13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
  169.     return new Point(x * this.scale, y * this.scale);
  170. }
  172. //===== COLOR =====
  173. function Color(r, g, b, a) {
  174.     this.r = (r != null || isNaN(r)) ? r : 0;
  175.     this.g = (g != null || isNaN(g)) ? g : 0;
  176.     this.b = (b != null || isNaN(b)) ? b : 0;
  177.     this.a = (a != null || isNaN(a)) ? a : 1;
  178.     this.hex = this.toHex();
  179.     GenericObject.call(this, "Color");
  180. }
  181. Color.prototype = new GenericObject();
  182. Color.prototype.toHex = function() {
  183.     var bin = this.r << 16 | this.g << 8 | this.b;
  184.     return (function(h) {
  185.         return "#" + new Array(7 - h.length).join("0") + h
  186.     })(bin.toString(16).toUpperCase())
  187. }
  188. Color.prototype.getRGBA = function() {
  189.     return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
  190. }
  191. Color.prototype.setHex = function(hex) {
  192.     this.r = hex >> 16;
  193.     this.g = hex >> 8 & 0xFF;
  194.     this.b = hex & 0xFF;
  195.     this.hex = this.toHex();
  196. }
  198. //===== GENERICOBJECT =====
  199. function GenericObject(name) {
  200.     this.classname = name;
  201. }
  202. GenericObject.prototype.clone = function() {
  203.     var copy = new GenericObject(this.classname);
  204.     for (var attr in this) {
  205.         if (this.hasOwnProperty(attr)) {
  206.             if (this[attr].constructor.name == "GenericObject") copy[attr] = this[attr].clone();
  207.             else copy[attr] = this[attr];
  208.         }
  209.     }
  210.     return copy;
  211. }

不学没思路，看完是不是感觉也不难啊？你做出来了吗？

还有下面这个情人节代码我就不写了，更多表白代码可以在下方公z号获取~

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要可在下方公z号：前端老实人，获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_52691965/article/details/122925934

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptHtmlcssweb网页模板

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com