JavaScript generates random graphics by clicking
|
This article shares the specific code of javascript to realize the generation of random graphics by clicking for your reference. The specific content is as follows Click to generate random graphics The effect is as follows:
Implemented with JavaScript Mainly use canvas and random functions to complete various graphics first step Create the rectangle where the graphic will appear and the two buttons in HTML and CSS. The first button is used to generate graphics, and the second button is used to clear all generated graphics.
<style>
*{
margin: 0;
padding: 0;
}
#canvas{
border: solid 1px red;
display: block;
margin: 0 auto;
}
#father{
width: 200px;
margin:0 auto;
}
#btn{
margin-right: 40px;
cursor: pointer;
}
#cle{
cursor: pointer;
}
</style><body> <canvas id="canvas" width="600" height="600"></canvas> <div id="father"> <input type="button" id="btn" value="Click to generate"> <input type="button" id="cle" value="Click to clear"> </div> </body> Step 2 In javascript, create functions for random colors, functions for randomly generating graphics when clicked, and functions for clearing the screen when clicked.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var btn = document.getElementById("btn");
var cle = document.getElementById("cle");Set the random color of the shape
function color(){
var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
var a=Math.random();
var bg="rgba("+r+","+g+","+b+","+a+")";
return bg;
}Set up a function to randomly generate graphics when clicking a button. The first type is solid and hollow rectangles, the second type is solid and hollow circles, and the third type is a straight line. Write random functions for their positions and sizes, and then add canvas codes to draw graphics, such as context.beginPath()-context closePath().
btn.onclick=function(){
var random = Math.floor(Math.random()*3+1);
if(random==1){
var rectr=Math.floor(Math.random()*2);
var rectx = Math.floor(Math.random()*600);
var recty=Math.floor(Math.random()*600);
var rectwidth=Math.floor(Math.random()*200+200);
var rectheight=Math.floor(Math.random()*200+200);
if(rectr== 0){
context.beginPath();
context.strokeStyle=color();
context.strokeRect(rectx,recty,rectwidth,rectheight)
context.closePath();
}
else {
context.beginPath();
context.fillStyle=color();
context.fillRect(rectx,recty,rectwidth,rectheight);
context.closePath();
}
}
else if(random == 2){
var arcr = Math.floor(Math.random()*2);
var arcx=Math.floor(Math.random()*600);
var arcy=Math.floor(Math.random()*600);
var arcr = Math.floor(Math.random()*300);
if(arcr==0){
context.beginPath();
context.strokeStyle=color();
context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
context.stroke();
context.closePath();
}
else{
context.beginPath();
context.fillStyle=color();
context.arc(arcx,arcy,arcr,0,2*Math.PI,false);
context.fill();
context.closePath();
}
}
else if(random==3){
var movex = Math.floor(Math.random()*600);
var movey=Math.floor(Math.random()*600);
var linex = Math.floor(Math.random()*600);
var liney = Math.floor(Math.random()*600);
var linew = Math.floor(Math.random()*20);
context.beginPath();
context.strokeStyle=color();
context.moveTo(movex,movey);
context.lineTo(linex,liney);
context.lineWidth=linew;
context.stroke();
context.closePath();
}
}Step 3 Finally, create a button function to clear the screen. According to the created screen size, add context.clearRect(0,0,600,600) in canvas to clear the screen.
cle.onclick=function(){
context.beginPath();
context.clearRect(0,0,600,600);
context.closePath();
}Click to generate random graphics effect! 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:
|
<<: Nginx cache files and dynamic files automatic balancing configuration script
>>: What is Makefile in Linux? How does it work?
Recommend
How to view server hardware information in Linux
Hi, everyone; today is Double 12, have you done a...
Tools to convert static websites into RSS
<br /> This article is translated from allwe...
Summary of Common Mistakes in Web Design
In the process of designing a web page, designers...
What are the core modules of node.js
Table of contents Global Object Global objects an...
Nexus uses API to operate
Nexus provides RestApi, but some APIs still need ...
Apache Bench stress testing tool implementation principle and usage analysis
1: Throughput (Requests per second) A quantitativ...
Looking at Tomcat's thread model from the connector component - BIO mode (recommended)
In higher versions of Tomcat, the default mode is...
9 Tips for MySQL Database Optimization
Table of contents 1. Choose the most appropriate ...
The difference and usage between div and span
Table of contents 1. Differences and characterist...
Basic commands for MySQL database operations
1. Create a database: create data data _name; Two...
Example of using CASE WHEN in MySQL sorting
Preface In a previous project, the CASE WHEN sort...
Native JS to implement sharing sidebar
This article shares a sharing sidebar implemented...
CSS Summary Notes: Examples of Transformations, Transitions, and Animations
1. Transition Transition property usage: transiti...
Introduction to CSS style classification (basic knowledge)
Classification of CSS styles 1. Internal style --...
Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 1)
According to Chinese custom, we are still celebra...