JavaScript canvas realizes colorful sun halo effect
|
This article example shares the specific code of JavaScript canvas to achieve the colorful sun halo effect for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cx = canvas.getContext("2d");
cx.fillStyle='pink';
cx.strokeStyle='pink';
for(var i=0;i<10;i++){
var g = cx.createLinearGradient(0,0,290,290);
g.addColorStop(0,'rgba(255,0,0,1)');
g.addColorStop(0.1,'rgba(255,0,0,0.5)');
g.addColorStop(0.2,'rgba(255,165,0,0.4)');
g.addColorStop(0.4,'rgba(205,255,0,0.5)');
g.addColorStop(0.6,'rgba(230,145,0,0.5)');
g.addColorStop(0.8,'rgba(0,127,255,0.5)');
g.addColorStop(0.9,'rgba(100,200,205,0.9)');
g.addColorStop(1,'rgba(0,255,255,0.5)');;
cx.fillStyle=g;
cx.beginPath();
cx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cx.closePath();
cx.fill();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>The effect diagram is as follows:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySQL 5.7.18 MSI Installation Graphics Tutorial
>>: A complete guide to the Docker command line (18 things you have to know)
Recommend
HTML framework_Powernode Java Academy
1. Framework A browser document window can only d...
About Zabbix forget admin login password reset password
The problem of resetting the password for Zabbix ...
The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS
We often need to control the hidden, transparent ...
Website Building Tutorial for Beginners: Learn to Build a Website in Ten Days
The 10-day tutorial uses the most understandable ...
Tutorial on installing MySQL 5.7.9 using RPM package under CentOS 7
Recorded MySQL 5.7.9 installation tutorial, share...
Detailed steps for IDEA to integrate docker to achieve remote deployment
1. Enable remote access to the docker server Log ...
Detailed explanation of CSS multiple three-column adaptive layout implementation
Preface In order to follow the conventional WEB l...
Implementation of Bootstrap web page layout grid
Table of contents 1. How the Bootstrap grid syste...
Html and CSS Basics (Must Read)
(1) HTML: HyperText Markup Language, which mainly...
js learning notes: class, super and extends keywords
Table of contents Preface 1. Create objects befor...
Vue project packaging and optimization implementation steps
Table of contents Packaging, launching and optimi...
Vue3 based on script setup syntax $refs usage
Table of contents 1. Vue2 syntax 2. Use of Vue3 1...
Some small methods commonly used in html pages
Add in the <Head> tag <meta http-equiv=&q...
Several ways to update batches in MySQL
Typically, we use the following SQL statement to ...
Example analysis of the usage of the new json field type in mysql5.7
This article uses an example to illustrate the us...