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
Detailed analysis of each stage of nginx's http request processing
When writing the HTTP module of nginx, it is nece...
How to solve the phantom read problem in MySQL
Table of contents Preface 1. What is phantom read...
Overview of the definition of HTC components after IE5.0
Before the release of Microsoft IE 5.0, the bigges...
Example of how to set up a third-level domain name in nginx
Problem Description By configuring nginx, you can...
How to create Apache image using Dockerfile
Table of contents 1. Docker Image 2. Create an in...
Two solutions to the problem of MySQL in conditional statement only reading one piece of information
Today, my colleague encountered a very strange pr...
Detailed tutorial on installing MySQL 8.0 from source code on CentOS 7.4
Table of contents 1. Environment 2. Preparation 3...
Vue implements a search box with a magnifying glass
This article shares with you how to use Vue to im...
JavaScript operation elements teach you how to change the page content style
Table of contents 1. Operation elements 1.1. Chan...
Vue implements tab label (label exceeds automatic scrolling)
When the created tab label exceeds the visible ar...
Sharing of research experience on using characters instead of rounded corners and sharp corners
1. The relationship between fonts and character d...
How to make your own native JavaScript router
Table of contents Preface Introduction JavaScript...
Website Building Tutorial for Beginners: Learn to Build a Website in Ten Days
The 10-day tutorial uses the most understandable ...
Vue implements anchor positioning function
This article example shares the specific code of ...
How to introduce img images into Vue pages
When we learn HTML, the image tag <img> int...