Comment dessiner des cercles disjoints avec les compétences javascript_javascript

Effet

code html

Copier le code Le code est le suivant :

<id de toile="my_canvas" width="500" height="400">
Votre navigateur ne prend pas en charge Canvas
</toile>
<button id="my_btn">Un autre cercle</button>

code javascript

Copier le code Le code est le suivant :

var context=document.getElementById("my_canvas");
context=context.getContext("2d");
var cercles=[];
var largeur=500;
var hauteur=400;
var max_radius=30;
var min_radius=20;
var compte=0;
window.onload=function(){
var btn=document.getElementById("my_btn");
btn.onclick=fonction(){
var time=nouvelle Date();
start=time.getTime();
make_circle();
>
>
fonction Cercle(x,y,r,couleur){
ceci.x=x;
this.y=y;
ceci.r=r;
this.color=color;
>
fonction make_circle(){
var x=Math.floor(Math.random()*width) 1;
var y=Math.floor(Math.random()*height) 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)) ")";//faire une couleur différente
var cercle=nouveau Cercle(x,y,r,couleur);
si(test1(cercle)&&test2(cercle)){
cercles.push(cercle);
context.StrokeStyle=color;
contexte.beginPath();
contexte.arc(x,y,r,0,Math.PI*2,true);
contexte.closePath();
contexte.AVC();
compte=0;
>
autre{
compte ;
if(count>10000){//s'il boucle trop de fois, nous pouvons supposer qu'il n'y a pas d'espace pour un nouveau cercle
alert("plus de cercle");
retourner faux ;
>
make_circle();
>
>
function test1(circle){//tester si le nouveau cercle croise les autres
var len=circles.length;
pour(var i=0;i<len;i ){
var x1=cercles[i].x;
var y1=cercles[i].y;
var r1=cercles[i].r;
var x2=cercle.x;
var y2=cercle.y;
var r2=cercle.r;
si((x1-x2)*(x1-x2) (y1-y2)*(y1-y2)<(r2 r1)*(r2 r1)){
retourner faux ;
>
>
renvoie vrai ;
>
function test2(circle){//test si le nouveau cercle touche la bordure
if((circle.x circle.r)>largeur||(circle.y circle.r)>height||(circle.x-circle.r)<0||(circle.y-circle.r )<0){
retourner faux ;
>
autre{
renvoie vrai ;
>
>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de maîtriser le javascript.