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
An article to master MySQL index query optimization skills
Preface This article summarizes some common MySQL...
WeChat applet development practical skills: data transmission and storage
Combining the various problems I encountered in m...
The qualities and abilities a web designer should have
Web design is an emerging marginal industry that c...
Nginx external network access intranet site configuration operation
background: The site is separated from the front ...
Specific use of node.js global variables
Global Object All modules can be called global: r...
js to achieve simple drag effect
This article shares the specific code of js to ac...
Three ways to prevent MySQL from inserting duplicate data
Create a new table CREATE TABLE `person` ( `id` i...
MySQL 8.0.19 winx64 installation tutorial and change the initial password under Windows 10
This article shares the installation tutorial of ...
Vue uses Echarts to implement a three-dimensional bar chart
This article shares the specific code of Vue usin...
A brief discussion on the manifestation and value selection method of innodb_autoinc_lock_mode
Prerequisite: Percona 5.6 version, transaction is...
Implementation of React page turner (including front and back ends)
Table of contents front end According to the abov...
An example of implementing a simple finger click animation with CSS3 Animation
This article mainly introduces an example of impl...
Is it true that the simpler the web design style, the better?
Original address: http://www.webdesignfromscratch...
When to use Map instead of plain JS objects
Table of contents 1. Map accepts any type of key ...
Summary of principles for writing HTML pages for emails
Since HTML email is not an independent HOST page o...