雷迪森安的乡亲们,欢迎来到老实人的前端课堂,这情人节的,我把爱心都给你们准备好了,今天我们来写个爱心吧。
注意看到最后哦,下面还有一个更好看的特效,这个是个动态的♥♥
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<canvas id="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 ----------
function init() {
renderable = [];
path = new Shape(new Heart(), new Point(cw / 2, ch / 2), new Color(244, 244, 244, 1), {
scale: 10
});
animate();
}
function animate() {
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);
}
function addShape(angle) {
renderable.push(new Shape(new Circle(5), new Point(cw / 2, ch / 2), new Color(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;
var FPS = 60;
var renderable = [],
path,
path2,
angle = 0,
angle2 = 0,
color;
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return setTimeout(callback, FPS);
};
window.onload = function() {
initCanvas();
ctx.clearRect(0, 0, cw, ch);
init();
}
window.onresize = function() {
initCanvas();
ctx.clearRect(0, 0, cw, ch);
};
function initCanvas() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
cw = window.innerWidth;
ch = window.innerHeight;
canvas.width = cw;
canvas.height = ch;
}
//---------------- APP UTIL ------------------
function getRandomNumber(min, max) {
return Math.random() * (max - min + 1) + min;
}
//---------- EXTRACT OF MY NEXT FRAMEWORK ------------
//----------- PROTOTYPES -------------
//===== GEOMETRY =====
//----- SHAPE -----
function Shape(geometry, position, color, properties) {
this.position = (position == null || position.classname != "Point") ? new Point() : position;
this.geometry = (geometry == null || geometry.constructor.name != "GenericObject") ? new Circle() : 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 = new GenericObject();
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 -----
function Point(x, y) {
this.x = (x != null && !isNaN(x)) ? x : 0;
this.y = (y != null && !isNaN(y)) ? y : 0;
GenericObject.call(this, "Point");
}
Point.prototype = new GenericObject();
Point.prototype.add = function(p2) {
if (p2.classname != this.classname) return null;
this.x += p2.x;
this.y += p2.y;
return this;
}
Point.prototype.multiply = function(scale) {
this.x *= scale;
this.y *= scale;
return this;
}
//----- CIRCLE -----
function Circle(radius) {
this.center = new Point();
this.radius = (radius != null && !isNaN(radius)) ? radius : 1;
GenericObject.call(this, "Circle");
}
Circle.prototype = new GenericObject();
//----- HEART -----
function Heart(scale) {
this.scale = (scale != null && !isNaN(scale)) ? scale : 1;
GenericObject.call(this, "Heart");
}
Heart.prototype = new GenericObject();
Heart.prototype.getPositionByAngle = function(angle) {
if (angle == null || isNaN(angle)) return null;
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));
return new Point(x * this.scale, y * this.scale);
}
//===== COLOR =====
function Color(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 = new GenericObject();
Color.prototype.toHex = function() {
var bin = this.r << 16 | this.g << 8 | this.b;
return (function(h) {
return "#" + new Array(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 =====
function GenericObject(name) {
this.classname = name;
}
GenericObject.prototype.clone = function() {
var copy = new GenericObject(this.classname);
for (var attr in this) {
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.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)
博主为人老实,无偿解答问题,也会录制一些学习视频教同学们知识❤
如果对您有帮助,希望能给个👍/评论/收藏
您的三连~是对我创作最大的动力支持
关注:前端老实人👇领取源码哦~
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_52691965/article/details/122925934
内容来源于网络,如有侵权,请联系作者删除!