Cara melukis bulatan berpisah dengan kemahiran javascript_javascript

Kesan

kod html

Salin kod Kod adalah seperti berikut:

Penyemak imbas anda tidak menyokong kanvas

Kalangan Lain

kod javascript

Salin kod Kod adalah seperti berikut:

var context=document.getElementById("kanvas_saya");
context=context.getContext("2d");
var circles=[];
var lebar=500;
ketinggian var=400;
var max_radius=30;
var min_radius=20;
var count=0;
window.onload=function(){
var btn=document.getElementById("my_btn");
btn.onclick=function(){
var time=new Date();
start=time.getTime();
make_circle();
}
}
fungsi Bulatan(x,y,r,warna){
ini.x=x;
ini.y=y;
ini.r=r;
this.color=color;
}
fungsi make_circle(){
var x=Math.floor(Math.random()*lebar) 1;
var y=Math.floor(Math.random()*tinggi) 1;
var r=Math.floor(Math.random()*(max_radius-min_radius)) min_radius;
var color="rgb(" (Math.floor(Math.random()*256)) "," (Math.floor(Math.random()*256)) "," (Math.floor(Math.random( )*256)) ")";//buat warna yang berbeza
bulatan var=Kalangan baharu(x,y,r,warna);
if(ujian1(bulatan)&&ujian2(bulatan)){
circles.push(bulatan);
context.strokeStyle=color;
context.beginPath();
context.arc(x,y,r,0,Math.PI*2,true);
context.closePath();
context.stroke();
kiraan=0;
}
lain{
kira ;
if(count>10000){//jika gelung terlalu banyak kali, kita boleh menganggap bahawa tiada ruang untuk kalangan baharu
alert("tiada lagi kalangan");
pulangkan palsu;
}
make_circle();
}
}
function test1(circle){//test jika bulatan baharu bersilang dengan yang lain
var len=circles.length;
untuk(var i=0;i var x1=kalangan[i].x;
var y1=kalangan[i].y;
var r1=kalangan[i].r;
var x2=bulatan.x;
var y2=circle.y;
var r2=circle.r;
jika((x1-x2)*(x1-x2) (y1-y2)*(y1-y2)<(r2 r1)*(r2 r1)){
pulangkan palsu;
}
}
kembali benar;
}
function test2(circle){//test jika bulatan baharu menyentuh sempadan
if((bulatan.x bulatan.r)>lebar||(bulatan.y bulatan.r)>tinggi||(bulatan.x-bulatan.r)<0||(bulatan.y-bulatan.r )<0){
pulangkan palsu;
}
lain{
kembali benar;
}
}

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang untuk menjadi mahir dalam javascript.