JavaScript画漂亮的心形图案

谁说程序员不懂浪漫，满屏跳动的心形图案送给你，先看效果：

JavaScript代码如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="background-color: white">
<canvas id='cavs' style='position:fixed; z-index:-1;'></canvas>
</body>
</html>
<script type="text/javascript">
var canvas = document.getElementById("cavs");
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
canvas.setAttribute("width", WIDTH);
canvas.setAttribute("height", HEIGHT);
var context = canvas.getContext("2d");
var start =
{loves: [],DURATION: 30,begin: function(){this.createLove();},createLove: function(){for (var i = 0; i < WIDTH / 59; i++){var love = new Love();this.loves.push(love);}setInterval(this.drawLove.bind(this), this.DURATION);},drawLove: function(){context.clearRect(0, 0, WIDTH, HEIGHT);for (var key in this.loves){this.loves[key].draw();}}
}
function Love()
{var me = this;function rand() {me.maxScale = (Math.random() * 3.2 + 1.2) * WIDTH / 521;me.curScale = 1.2 * WIDTH / 521;me.x = Math.floor(Math.random() * WIDTH - 40);me.y = Math.floor(HEIGHT - Math.random() * 200);me.ColR = Math.floor(Math.random() * 255);me.ColG = Math.floor(Math.random() * 255);me.ColB = Math.floor(Math.random() * 255);me.alpha = Math.random() * 0.2 + 0.8;me.vector = Math.random() * 5 + 0.4;}(function(){rand();} ());me.draw = function(){if (me.alpha < 0.01) rand();if(me.curScale < me.maxScale) me.curScale += 0.3;x = me.x;y = me.y;scale = me.curScale;context.fillStyle = "rgba(" + me.ColR + "," + me.ColG + "," + me.ColB + "," + me.alpha + ")";context.shadowBlur = 10;context.shadowColor = "rgb(" + me.ColR + "," + me.ColG + "," + me.ColB + ")";context.beginPath();context.bezierCurveTo( x + 2.5*scale, y + 2.5*scale, x + 2.0*scale, y, x, y );context.bezierCurveTo( x - 3.0*scale, y, x - 3.0*scale, y + 3.5*scale,x - 3.0*scale,y + 3.5*scale );context.bezierCurveTo( x - 3.0*scale, y + 5.5*scale, x - 1.0*scale, y + 7.7*scale, x + 2.5*scale, y + 9.5*scale );context.bezierCurveTo( x + 6.0*scale, y + 7.7*scale, x + 8.0*scale, y + 5.5*scale, x + 8.0*scale, y + 3.5*scale );context.bezierCurveTo( x + 8.0*scale, y + 3.5*scale, x + 8.0*scale, y, x + 5.0*scale, y );context.bezierCurveTo( x + 3.5*scale, y, x + 2.5*scale, y + 2.5*scale, x + 2.5*scale, y + 2.5*scale );context.fill();context.closePath();me.y -= me.vector;me.alpha -= (me.vector / 2.9 * 3.5 / HEIGHT);}
}
window.onload = function()
{start.begin();
}
</script>

JavaScript画漂亮的心形图案相关推荐

html+js画一颗心形,javascript绘制漂亮的心型线效果完整实例
本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS心型线 div{ position:absolute; } . ...
java 打印心形图案_简单漂亮的心形礼品盒折纸手工教程
1 精美的礼物少不了一个与其搭配的包装盒,当你有一份可经表达你心意或爱的礼物,准备送给他/她时,用这样一个心形的纸盒作为礼物的包装盒是再合适不过了,即简单又足够漂亮,而且可以与你的礼物要表达的意思相. ...
用java画爱心图_java实现心形图案桃心
相信对于打印三角形都没什么难度,只必要诳骗for轮回嵌套驾驭就行可是看待打印圆形和三角形分袂原故到圆心隔绝相称的点大凡不会横坐标和纵坐标都为整数打印爱酷爱心的公式(x²+y²-1)³-x²*y³=0调 ...
怎么用python编写心形图案,python编程爱心形状turtle
如何利用python画一个爱心 1 from turtle import * 2 def curvemove(): #这个函数是为了绘制爱心上方的曲线 3 for i in range(200): 4 ...
绘制动态心形图案：：R语言绘制心形图
原始方程源于此贴一楼:直通车整理修改后: 被窝修改成这样: x<-seq(-1.1,1.1,length = 3000) rep<-30 y<-matrix(,3000,rep) ...
Php字符拼出心形,怎么用文字拼成心形？名字心形图案怎么做？文字拼成一个爱心怎么制作？告白图片制作...
昨天说明天就是七夕节了,那么今天呢~就是七夕啦,不过小编家乡那边不把七夕当情人节过的,反而是虚岁十五岁少年的成人礼,可隆重了呢~但是此刻不在老家的小编还是不能免俗的要把今天当成情人节啊,虽然是只单身汪 ...
php编程输出心形图案_利用php输出不同的心形图案，php心形图案_PHP教程
利用php输出不同的心形图案,php心形图案首先为大家分享php输出心形曲线的代码,代码如下效果如下: 利用php输出笛卡尔心形图案,代码如下复制代码代码如下:$width = 600; $h ...
php 实现心芯图案,利用php输出不同的心形图案
首先为大家分享php输出心形曲线的代码,代码如下效果如下: 利用php输出笛卡尔心形图案,代码如下复制代码代码如下: $width = 600; $height = 650; header(&q ...
【C语言】用C语言输出“心形”图案
在你们的世界里,是不是觉得程序猿一点浪漫都不懂?其实不是的,程序猿的世界也是很浪漫滴! 傻瓜版 int main() {printf("❤");return 0; } 高级版 // ...

JavaScript画漂亮的心形图案

JavaScript画漂亮的心形图案相关推荐

最新文章

热门文章