今天就跟大家聊聊有關利用javascript怎么實現一個生成隨機圖形功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
第一步
在HTML和CSS中創建出現圖形的矩形和兩個按鈕。第一個按鈕用來產生圖形，第二個按鈕用來清除產生的所有圖形。
<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="點擊生成"> <input type="button" id="cle" value="點擊清除"> </div> </body>
第二步
在javascript中分別創建用來隨機顏色的函數，點擊隨機產生圖形的函數，點擊清除屏幕的函數。
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var btn=document.getElementById("btn");
var cle=document.getElementById("cle");設置圖形的隨機顏色
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;
}設置點擊按鈕隨機產生圖形的函數，第一種實心和空心矩形，第二種實心和空心圓，第三種直線，它們的位置和大小分別寫隨機函數，再分別加上canvas代碼，用來畫圖形，如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();
}
}第三步
最后創建點擊清除屏幕的按鈕函數,根據創建的屏幕大小，在canvas中添加 context.clearRect(0,0,600,600);可實現清除屏幕。
cle.onclick=function(){
context.beginPath();
context.clearRect(0,0,600,600);
context.closePath();
}看完上述內容，你們對利用javascript怎么實現一個生成隨機圖形功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
