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