javascript - Dynamic object html - alternate between objects drawn by function on canvas and use range/slider to change pattern -
i'm writing web app using html,javascript,css.
i have made 2 dynamic functions, 1 draws triangles , other circles. when move slider creates pattern images drawn. when mouseclick on canvas changes triangles circles.
the problem after change triangles circles clicking on canvas , try move slider image goes original (triangles). can click on canvas change triangles circles cannot change click.
this want do:
1º - want click on canvas , change triangles circles , forth, alternate between figures click on canvas.
2º - after clicking on canvas alternate images - slider must change pattern created shown on canvas - , not go original unless click again on canvas.
i provide code bellow. hope can take it. time.
<html> <head> <meta charset="utf-8" /> <title>canvas</title> <style> .etiq1{font-family:verdana; font-size:15px;} #screen, #vect{border: 1px solid #000000;background-color:#0000ff;} input {text-align: right;} </style> <script> var screen,vect,paint,pr; function inicgraf(){ screen = document.getelementbyid("screen"); paint = screen.getcontext("2d"); pr=document.getelementbyid("pr"); } function triangle(x,y,x1,y1,x2,y2,side,colorline,colorinside){ paint.strokestyle=colorline; paint.linewidth=1; paint.beginpath(); paint.moveto(x,y); paint.lineto(x1,y1); paint.lineto(x2,y2); paint.closepath(); paint.fillstyle=colorinside; paint.fill(); paint.stroke(); } function trianglefour(x,y,side){ triangle(x,y,(x+side),y,x+(side/2.0),y+(side/2.0),side,"#e6b569","#e6b569"); triangle(x+side,y,x+side,y+side,x+(side/2.0),y+(side/2.0),side,"#aa8d49","#aa8d49"); triangle(x+side,y+side,x,y+side,x+(side/2.0),y+(side/2.0),side,"#013d55","#013d55"); triangle(x,y+side,x,y,x+(side/2.0),y+(side/2.0),side,"#449779","#449779"); } function patternfour(modul){ var i,j,tam=500/modul; for(i=0;i<modul;i++){ for(j=0;j<modul;j++){ trianglefour(i*tam,j*tam,tam) } } } function circscreen(x,y,radius,colorline,corfundo){ paint.linewidth=1; paint.strokestyle=colorline; paint.fillstyle=corfundo; paint.beginpath(); paint.arc(x,y,radius,0,2.0*math.pi); paint.closepath();paint.fill();paint.stroke(); } function circscreenblue(x, y, side) { var r1 = (side / 2.0), r2 = (((side / 2.0) * 80.0) / 100.0); circscreen(x + r1, y, r1, "#449779", "#449779"); circscreen(x + r1, y, r2, "#013d55", "#013d55"); } function circscreencream(x, y, side) { var r1 = (side / 2.0), r2 = (((side / 2.0) * 80.0) / 100.0); circscreen(x, y + r1, r1, "#e6b569", "#e6b569"); circscreen(x, y + r1, r2, "#aa8d49", "#aa8d49"); } function patterncirc(modul) { var i, j, tam = 500 / modul; (j = modul; j >= 0; j--) { (i = 0; <= modul; i++) { circscreencream(i * tam, j * tam, tam); } (i = 0; <= modul; i++) { circscreenblue(i * tam, j * tam, tam); } } } function monitor(){ var cr; cr=document.getelementbyid("cr"); pr.value=cr.value; } </script> </head> <body onload="patternfour(pr.value)"> <canvas id="screen" width="500" height="500" onclick="patterncirc(pr.value)"></canvas> <input id="pr" size="1" value="4" min="1" max="30" /> <input id="cr" type="range" value="4" min="1" max="30" step="1" onchange="patternfour(pr.value)" onmousemove="monitor()"/> </div> <script> inicgraf(); </script> </body>
you can keep boolean value in variable , toggle each time click. use value determine function call. here tried leave of code as-is, , introduced iscirc, drawpattern , patterntoggle:
function patterntoggle(value) { iscirc = !iscirc; drawpattern(value); } function drawpattern(value) { if (iscirc) patterncirc(value); else patternfour(value); } you can run code inline below:
<html> <head> <meta charset="utf-8" /> <title>canvas</title> <style> .etiq1{font-family:verdana; font-size:15px;} #screen, #vect{border: 1px solid #000000;background-color:#0000ff;} input {text-align: right;} </style> <script> var screen,vect,paint,pr,iscirc=false; function inicgraf(){ screen = document.getelementbyid("screen"); paint = screen.getcontext("2d"); pr=document.getelementbyid("pr"); } function triangle(x,y,x1,y1,x2,y2,side,colorline,colorinside){ paint.strokestyle=colorline; paint.linewidth=1; paint.beginpath(); paint.moveto(x,y); paint.lineto(x1,y1); paint.lineto(x2,y2); paint.closepath(); paint.fillstyle=colorinside; paint.fill(); paint.stroke(); } function trianglefour(x,y,side){ triangle(x,y,(x+side),y,x+(side/2.0),y+(side/2.0),side,"#e6b569","#e6b569"); triangle(x+side,y,x+side,y+side,x+(side/2.0),y+(side/2.0),side,"#aa8d49","#aa8d49"); triangle(x+side,y+side,x,y+side,x+(side/2.0),y+(side/2.0),side,"#013d55","#013d55"); triangle(x,y+side,x,y,x+(side/2.0),y+(side/2.0),side,"#449779","#449779"); } function patternfour(modul){ var i,j,tam=500/modul; for(i=0;i<modul;i++){ for(j=0;j<modul;j++){ trianglefour(i*tam,j*tam,tam) } } } function circscreen(x,y,radius,colorline,corfundo){ paint.linewidth=1; paint.strokestyle=colorline; paint.fillstyle=corfundo; paint.beginpath(); paint.arc(x,y,radius,0,2.0*math.pi); paint.closepath();paint.fill();paint.stroke(); } function circscreenblue(x, y, side) { var r1 = (side / 2.0), r2 = (((side / 2.0) * 80.0) / 100.0); circscreen(x + r1, y, r1, "#449779", "#449779"); circscreen(x + r1, y, r2, "#013d55", "#013d55"); } function circscreencream(x, y, side) { var r1 = (side / 2.0), r2 = (((side / 2.0) * 80.0) / 100.0); circscreen(x, y + r1, r1, "#e6b569", "#e6b569"); circscreen(x, y + r1, r2, "#aa8d49", "#aa8d49"); } function patterncirc(modul) { var i, j, tam = 500 / modul; (j = modul; j >= 0; j--) { (i = 0; <= modul; i++) { circscreencream(i * tam, j * tam, tam); } (i = 0; <= modul; i++) { circscreenblue(i * tam, j * tam, tam); } } } function monitor(){ var cr; cr=document.getelementbyid("cr"); pr.value=cr.value; } function patterntoggle(value) { iscirc = !iscirc; drawpattern(value); } function drawpattern(value) { if (iscirc) patterncirc(value); else patternfour(value); } </script> </head> <body onload="patternfour(pr.value)"> <canvas id="screen" width="500" height="500" onclick="patterntoggle(pr.value)"></canvas> <input id="pr" size="1" value="4" min="1" max="30" /> <input id="cr" type="range" value="4" min="1" max="30" step="1" onchange="drawpattern(pr.value)" onmousemove="monitor()"/> <script> inicgraf(); </script> </body>
Comments
Post a Comment