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
Use of Linux date command
1. Command Introduction The date command is used ...
MySQL 5.7.20 installation and configuration method graphic tutorial under Windows
Install MySQL under Windows for your reference. T...
Detailed explanation of how to customize the style of CSS scroll bars
This article introduces the CSS scrollbar selecto...
Summary of MySQL usage specifications
1. InnoDB storage engine must be used It has bett...
A brief introduction to the general process of web front-end web development
I see many novice students doing front-end develop...
Six inheritance methods in JS and their advantages and disadvantages
Table of contents Preface Prototype chain inherit...
Detailed explanation of how to configure secondary domain name on Apache server under Linux environment
This article describes how to configure a seconda...
Implementation of building Kubernetes cluster with VirtualBox+Ubuntu16
Table of contents About Kubernetes Basic environm...
Detailed installation and configuration of Subversion (SVN) under Ubuntu
If you are a software developer, you must be fami...
Native JavaScript carousel implementation method
This article shares the implementation method of ...
Detailed explanation of the role and principle of key in Vue
Table of contents 1. Let’s start with the conclus...
Detailed explanation of creating and calling MySQL stored procedures
Table of contents Preface Stored Procedure: 1. Cr...
IE8 Beta 1 has two areas that require your attention
<br />Related articles: Web skills: Multiple...
IE8 uses multi-compatibility mode to display web pages normally
IE8 will have multiple compatibility modes . IE pl...
Solve the problem of running hello-world after docker installation
Installed Docker V1.13.1 on centos7.3 using yum B...