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

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

正片

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

结构就两行

<scriptsrc="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script><canvasid="canvas"></canvas>

样式

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

body{margin: 0;font-family: Helvetica, Arial;font-weight: 100;overflow: hidden;}canvas{background-color:rgb(244, 244, 244);}footer{position: fixed;bottom: 0;width: 100%;}footer img{border-radius: 100%;width: 30px;height: 30px;margin-left: 10px;}footer span{display: block;padding: 10px;display: flex;justify-content: flex-end;align-items: center;}

表现

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

//---------- MAIN FUNCTION ----------functioninit(){
    renderable =[];
    path =newShape(newHeart(),newPoint(cw /2, ch /2),newColor(244,244,244,1),{
        scale:10});animate();}functionanimate(){addShape(angle);addShape(angle2);
    angle +=0.05;
    angle2 -=0.05;

    ctx.clearRect(0,0, cw, ch);for(var i =0; i < renderable.length; i++){
        renderable[i].draw(canvas);if(renderable[i].scale <=0) renderable.splice(i,1);}
    path.draw(canvas);requestAnimationFrame(animate);}functionaddShape(angle){

    renderable.push(newShape(newCircle(5),newPoint(cw /2, ch /2),newColor(253,192,192,1),{
        position:(((path.geometry.getPositionByAngle(angle)).multiply(path.scale)).add(path.position.clone())),
        decay:0.1,
        scale:3}));}//-----------------------------------var canvas, ctx, cw, ch;varFPS=60;var renderable =[],
    path,
    path2,
    angle =0,
    angle2 =0,
    color;var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||function(callback){returnsetTimeout(callback,FPS);};

window.onload=function(){initCanvas();
    ctx.clearRect(0,0, cw, ch);init();}
window.onresize=function(){initCanvas();
    ctx.clearRect(0,0, cw, ch);};functioninitCanvas(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    cw = window.innerWidth;
    ch = window.innerHeight;
    canvas.width = cw;
    canvas.height = ch;}//---------------- APP UTIL ------------------functiongetRandomNumber(min, max){return Math.random()*(max - min +1)+ min;}//---------- EXTRACT OF MY NEXT FRAMEWORK ------------//----------- PROTOTYPES -------------//===== GEOMETRY =====//----- SHAPE -----functionShape(geometry, position, color, properties){this.position =(position ==null|| position.classname !="Point")?newPoint(): position;this.geometry =(geometry ==null|| geometry.constructor.name !="GenericObject")?newCircle(): geometry;this.color =(color ==null|| color.classname !="Color")?null: color;this.lineColor =null;this.lineWidth =1;this.scale =1;this.decay =0;if(properties !=null)this.setProperties(properties);GenericObject.call(this,"Shape");}Shape.prototype =newGenericObject();Shape.prototype.setProperties=function(properties){for(var p in properties){this[p]= properties[p];}}Shape.prototype.draw=function(canvas){if(this.scale >0){var ctx = canvas.getContext('2d');var cw = canvas.width;var ch = canvas.height;

        ctx.beginPath();if(this.lineWidth >0&&(this.lineColor !=null&&this.lineColor.classname =="Color")){
            ctx.strokeStyle =this.lineColor.getRGBA();
            ctx.lineWidth =this.lineWidth;}if(this.color !=null&&this.color.classname =="Color"){
            ctx.fillStyle =this.color.getRGBA();}switch(this.geometry.classname){case"Circle":
                ctx.arc(this.position.x,this.position.y,this.geometry.radius *this.scale,0, Math.PI*2);break;case"Heart":for(var i =0; i < Math.PI*2; i +=0.05){var p =this.geometry.getPositionByAngle(i);
                    p.multiply(this.scale);
                    p.add(this.position);if(i ==0) ctx.moveTo(p.x, p.y);else ctx.lineTo(p.x, p.y);}break;}if(this.lineColor !=null&&this.lineColor.classname =="Color") ctx.stroke();if(this.color !=null) ctx.fill();this.scale -=this.decay;}}//----- POINT -----functionPoint(x, y){this.x =(x !=null&&!isNaN(x))? x :0;this.y =(y !=null&&!isNaN(y))? y :0;GenericObject.call(this,"Point");}Point.prototype =newGenericObject();Point.prototype.add=function(p2){if(p2.classname !=this.classname)returnnull;this.x += p2.x;this.y += p2.y;returnthis;}Point.prototype.multiply=function(scale){this.x *= scale;this.y *= scale;returnthis;}//----- CIRCLE -----functionCircle(radius){this.center =newPoint();this.radius =(radius !=null&&!isNaN(radius))? radius :1;GenericObject.call(this,"Circle");}Circle.prototype =newGenericObject();//----- HEART -----functionHeart(scale){this.scale =(scale !=null&&!isNaN(scale))? scale :1;GenericObject.call(this,"Heart");}Heart.prototype =newGenericObject();Heart.prototype.getPositionByAngle=function(angle){if(angle ==null||isNaN(angle))returnnull;var x =16* Math.pow(Math.sin(angle),3);var y =-(13* Math.cos(angle)-5* Math.cos(2* angle)-2* Math.cos(3* angle)- Math.cos(4* angle));returnnewPoint(x *this.scale, y *this.scale);}//===== COLOR =====functionColor(r, g, b, a){this.r =(r !=null||isNaN(r))? r :0;this.g =(g !=null||isNaN(g))? g :0;this.b =(b !=null||isNaN(b))? b :0;this.a =(a !=null||isNaN(a))? a :1;this.hex =this.toHex();GenericObject.call(this,"Color");}Color.prototype =newGenericObject();Color.prototype.toHex=function(){var bin =this.r <<16|this.g <<8|this.b;return(function(h){return"#"+newArray(7- h.length).join("0")+ h
    })(bin.toString(16).toUpperCase())}Color.prototype.getRGBA=function(){return"rgba("+this.r +","+this.g +","+this.b +","+this.a +")";}Color.prototype.setHex=function(hex){this.r = hex >>16;this.g = hex >>8&0xFF;this.b = hex &0xFF;this.hex =this.toHex();}//===== GENERICOBJECT =====functionGenericObject(name){this.classname = name;}GenericObject.prototype.clone=function(){var copy =newGenericObject(this.classname);for(var attr inthis){if(this.hasOwnProperty(attr)){if(this[attr].constructor.name =="GenericObject") copy[attr]=this[attr].clone();else copy[attr]=this[attr];}}return copy;}

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

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

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

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

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

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

最后

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

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

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

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