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)文章
組件銷毀有很多種情況比如頁面關(guān)閉,路由跳轉(zhuǎn)(沒有使用keep-alive時(shí)的路由切換）,這篇文章主要介紹了前端vue完全銷毀一個(gè)組件的簡(jiǎn)單步驟,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-04-04
Echarts官網(wǎng)上提供了很多圖表例子供我們白嫖,有時(shí)候遇到數(shù)據(jù)量比較大時(shí),它會(huì)向后臺(tái)請(qǐng)求json文件來加載圖表數(shù)據(jù),這篇文章主要給大家介紹了echarts讀取JSON文件并畫圖的相關(guān)資料,需要的朋友可以參考下2023-06-06
JS函數(shù)驗(yàn)證總結(jié)(方便js客戶端輸入驗(yàn)證)
JS函數(shù)驗(yàn)證總結(jié)，都是一些基礎(chǔ)的東西，現(xiàn)在比較流行jquery了，不過這些東西仍然需要大家會(huì)。2010-10-10
淺析Javascript中bind()方法的使用與實(shí)現(xiàn)
下面小編就為大家?guī)硪黄獪\析Javascript中bind()方法的使用與實(shí)現(xiàn)。小編覺得挺2016-05-05
JS逆向之?webpack?打包站點(diǎn)實(shí)戰(zhàn)原理分享
本文主要介紹了JS逆向之webpack打包站點(diǎn)實(shí)戰(zhàn)原理分享，webpack是前端程序員用來進(jìn)行打包JS的技術(shù)，打包之后的代碼特征非常明顯，更多相關(guān)知識(shí)需要的小伙伴可以參考下面文章詳細(xì)內(nèi)容2022-06-06
JS驗(yàn)證IP，子網(wǎng)掩碼，網(wǎng)關(guān)和MAC的方法
這篇文章主要介紹了JS驗(yàn)證IP，子網(wǎng)掩碼，網(wǎng)關(guān)和MAC的方法,涉及javascript正則表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2015-07-07
使用Promise解決多層異步調(diào)用的簡(jiǎn)單學(xué)習(xí)心得
下面小編就為大家?guī)硪黄褂肞romise解決多層異步調(diào)用的簡(jiǎn)單學(xué)習(xí)心得。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
javascript實(shí)現(xiàn)對(duì)話框功能警告（alert 消息對(duì)話框）確認(rèn)（confirm 消息對(duì)話框）
這篇文章主要介紹了javascript：警告（alert 消息對(duì)話框），確認(rèn)（confirm 消息對(duì)話框）的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
基于JavaScript繪制動(dòng)態(tài)花束的示例代碼
p5.js 是一個(gè)JavaScript的函數(shù)庫，它在制作之初就和Processing有同樣的目標(biāo)。本文將利用p5.js 制作出一束動(dòng)態(tài)花束，感興趣的可以嘗試一下2022-06-06
Javascript對(duì)象中關(guān)于setTimeout和setInterval的this介紹
Javascript對(duì)象中關(guān)于setTimeout和setInterval的this介紹，需要的朋友可以參考下2012-07-07