html5+canvas full screen 520 love confession web page code

Posted by twigletmac on Fri, 11 Feb 2022 11:14:29 +0100

❉ html5 canvas makes 520 watch day, full screen love and white language web page animation code, romantic 520 love expression animation special effects.

A very creative JavaScript love confession web animation special effects
js love bubble confession wall special effect code, js+css3 programmer love confession web animation, with love time records, full screen pink love floating background animation special effect

❉ file directory

❉ code implementation

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
		*{margin:0; padding:0;}
		body{ background-color: #1E1E1E; 		}

	<canvas id="drawHeart"></canvas>

		var hearts = [];
		var canvas = document.getElementById('drawHeart');
		var wW = window.innerWidth;
		var wH = window.innerHeight;
		// Create canvas
		var ctx = canvas.getContext('2d');
		// Create picture object
		var heartImage = new Image();
		heartImage.src = 'img/heart.svg';
		var num = 100;


		window.addEventListener('resize', function(){
			 wW = window.innerWidth;
			 wH = window.innerHeight;

		function getText(){
			var val = Math.random() * 10;
			if(val > 1 && val <= 3){
				return 'Love you all your life';
			} else if(val > 3 && val <= 5){
				return 'Thank you';
			} else if(val > 5 && val <= 8){
				return 'like you';
			} else{
				return 'I Love You';

		function Heart(type){
			this.type = type;
			// Initialize build range
			this.x = Math.random() * wW;
			this.y = Math.random() * wH;

			this.opacity = Math.random() * .5 + .5;

			// Offset
			this.vel = {
				x: (Math.random() - .5) * 5,
				y: (Math.random() - .5) * 5

			this.initialW = wW * .5;
			this.initialH = wH * .5;
			// Scale
			this.targetScale = Math.random() * .15 + .02; // 0.02 min
			this.scale = Math.random() * this.targetScale;

			// Text position
			this.fx = Math.random() * wW;
			this.fy = Math.random() * wH;
			this.fs = Math.random() * 10;
			this.text = getText();

			this.fvel = {
				x: (Math.random() - .5) * 5,
				y: (Math.random() - .5) * 5,
				f: (Math.random() - .5) * 2

		Heart.prototype.draw = function(){;
			ctx.globalAlpha = this.opacity;
			ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
			ctx.scale(this.scale + 1, this.scale + 1);
  				// Set text properties
				ctx.fillStyle = getColor();
	  			ctx.font = 'italic ' + this.fs + 'px sans-serif';
	  			// Fill string
	  			ctx.fillText(this.text, this.fx, this.fy);
		function render(){
			ctx.clearRect(0, 0, wW, wH);
			for(var i = 0; i < hearts.length; i++){
... Pay attention to the official account below to get the source code.

❉ how to send links to others ↓↓

❤ Solve the online problem > (you can deploy online free of charge without a server) deploy online tools (permanently available)

You can deploy your online without needing to buy a server, and the world can access your connection. Here we recommend a programmer's essential software. * * you need to get the official account below the article.
The plug-in integrates super easy-to-use plug-ins, which can be downloaded and installed for free. It is simple and easy to understand. It's an artifact

Original tutorial link

1. Deployment process

2. Successful connection

After the page you wrote is deployed online, people all over the world can happily visit your web page (for free forever)

❉ a complete set of front-end zero basic introduction to advanced (Video + source code + development software + learning materials + interview questions)

❉ get the source code ~ pay attention to me and praise the blog ~ bring you up knowledge every day!

❉ 1. See here, with the support of [like + praise + collection], your "like, praise, collection" is the driving force of my creation.

❉ 2. Pay attention to me ~ take you to learn every day: various front-end plug-ins, 3D cool effects, picture display, text effects, whole station templates, college students' graduation design templates, etc! "There are many front-end developers here who will discuss front-end Node knowledge and learn from each other"!

❉ 3. The above content can be exchanged with messages or private letters, and official account can also be used to get more source code.

❉ more source code

❤ Girlfriend's birthday ❤ HTML+css3+js to achieve the tiktok cherry 3D album (including background music) programmers must express the necessary

❤ Cool fireworks confession ❤ html+css+js play a romantic fireworks show (including music) programmer confession

Html+Js+Css+Canvas realize cool fireworks confession ❤ (cloud particle text 3D animation automatic switching, supporting custom text animation switching effects) / necessary for programmers

100 sets ❤ vue/react+echarts ❤ Large screen visual data platform actual combat project sharing (with source code)

❤ Tanabata Valentine's Day ❤ html+css+js flying snow 3D photo album (including music custom text) is a must for programmers to express themselves

❤ Beautiful stars in the sky ❤ html+css+js cool 3D photo album (including music and customizable text) is a must for programmers to express themselves

❤ html+css+js ❤ White clouds fluttering 3D photo album (including music) is a must for programmers to express themselves

❤ [front end permanent free deployment online tool] solve the problem that the project can be deployed online without a server!

This winter, I confessed in this way ❉ html+css+js ❉ drawing 3D photo album of snow in winter (521 programmer confessed code disclosure)

❤ I proposed to my girlfriend ❤, I gave my girlfriend a gift with code "you can take it to the person you like"

Tiktok ❤ Super fire | html+css+js meteor shower 3D album (necessary for confession) production tutorial is coming!

❤ Love wall ❤ html5+css3+js to achieve full screen Tanabata confession page (customizable text photos)

html+css+js illusion 3D photo album (including background music) necessary for programmers to express their feelings / 520 / Tanabata Valentine's Day

New year's greetings ❤ Snowflakes fall ❤ html+css3+js is necessary to realize the closing and rotation of 3D album switch (Valentine's day birthday confession)

front end ❤ html+css+js to achieve 1000 super cool special effects (with source code)

web front end ❤ Imitation JD tmall e-commerce platform based on html+css+js has complete functions (with source code for free)

Tiktok ❤ html+css+js to realize cool 3D cube image library (with source code for free)

Tiktok ❤ html+css+js to realize cool 3D magic cube (with source code for free)

Tiktok ❤ Mobile love html+css+js (free with source code)

Tiktok ❤ Compass clock html+css+js (free with source code)

Pro test effective ❤ Tiktok video watermark (with source code for reference only)

css3 to achieve 3D rotating cube (with source code for free)

css3 realize 3D stereo clock (with source code for free)

❤ Snowflakes fall ❤ New Year Countdown (HTML + CSS)

Tanabata Valentine's Day ❤ html+css+j ❤ Achieve full screen love effect (programmer confession)

A rotating CSS3 animation of heaven and earth Bagua geomantic compass gives people a feeling of Mystery (with source code)

520 confession / Tanabata / Valentine's Day / proposal / off order Html+Js+Css realize snowflake love ❤ (customizable text / Music) / necessary for programmers to express

520 programmer proposal Html+Js+Css petal album ❤ (love 3D animation, custom text) / necessary for programmers to express themselves

520 essential for flirting with girls ❤ Hand to hand teach you to roll one, photo album code

html+css+js to achieve (3D fantasy floating heart) stunning special effects

WeChat official account development ❤ One article is enough [recommended collection]

Introduction to wechat applet ❤ Hand touch hand roll applet, one is enough!

❤ 100 programmer love ❤ 520 / confession / Tanabata Valentine's Day / proposal ❤ Dedicated html5+css3+js cool animation web page source code (recommended Collection)