javascript實現(xiàn)點擊產(chǎn)生隨機圖形
更新時間：2021年01月25日 11:58:34 作者：半成熟、
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊產(chǎn)生隨機圖形，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)點擊產(chǎn)生隨機圖形的具體代碼，供大家參考，具體內(nèi)容如下
點擊產(chǎn)生隨機圖形
效果如下：
用javascript來實現(xiàn)
主要用canvas和隨機函數(shù)完成各種圖形
第一步
在HTML和CSS中創(chuàng)建出現(xiàn)圖形的矩形和兩個按鈕。第一個按鈕用來產(chǎn)生圖形，第二個按鈕用來清除產(chǎn)生的所有圖形。
<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中分別創(chuàng)建用來隨機顏色的函數(shù)，點擊隨機產(chǎn)生圖形的函數(shù)，點擊清除屏幕的函數(shù)。
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;
}
設置點擊按鈕隨機產(chǎn)生圖形的函數(shù)，第一種實心和空心矩形，第二種實心和空心圓，第三種直線，它們的位置和大小分別寫隨機函數(shù)，再分別加上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();
}
}
第三步
最后創(chuàng)建點擊清除屏幕的按鈕函數(shù),根據(jù)創(chuàng)建的屏幕大小，在canvas中添加 context.clearRect(0,0,600,600);可實現(xiàn)清除屏幕。
cle.onclick=function(){
context.beginPath();
context.clearRect(0,0,600,600);
context.closePath();
}
點擊產(chǎn)生隨機圖形的效果完成了！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
swiper.js插件實現(xiàn)pc端文本上下滑動功能示例
這篇文章主要介紹了swiper.js插件實現(xiàn)pc端文本上下滑動功能,結(jié)合實例形式分析了swiper.js插件的具體引用與相關使用技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了簡單分析js中的this的原理,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
本文主要介紹了JavaScript雙向鏈表實現(xiàn)LFU緩存算法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了Bootstrap縮略圖的創(chuàng)建方法，教大家如何實現(xiàn)Bootstrap縮略圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
數(shù)組是Javascript最常見的概念之一，它為我們提供了處理數(shù)據(jù)的許多可能性，熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個有用的JavaScript數(shù)組技巧，需要的朋友可以參考一下2021-12-12
這篇文章主要為大家詳細介紹了如何利用HTML+JavaScript模擬實現(xiàn)QQ中的下拉菜單效果。文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下2022-05-05
這篇文章給大家整理了動態(tài)JavaScript所造成的一些大家可能不知道的危害，文章介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
在js文件中寫el表達式取不到值，百度一下，將經(jīng)驗總結(jié)如下，有類似情況的朋友可以參考下2013-12-12
TypeScript由微軟開發(fā)的自由和開源的編程語言，是一種給 JavaScript 添加特性的語言擴展，接下來通過本文給大家介紹TypeScript 中如何限制對象鍵名的取值范圍，感興趣的朋友跟隨小編一起看看吧2021-05-05
Bootstrap框架結(jié)合jQuery仿百度換膚功能實例解析
這篇文章主要為大家詳細介紹了Bootstrap框架結(jié)合jQuery仿百度換膚功能實現(xiàn)代碼解析,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09