javascript - All set But my Moving rainbow canvas not working -
there 1 canvas , 4 buttons. 4 buttons circle,rectangle,square , animated rainbow. when click on cicle button in canvas circle show.and when click on rectangle button rectangle canvas show on canvas.
i done code moving rainbow on jsfiddle . when run code on local sublime. code not work.
can me solve problem. here code:
function circle() { create(); var c = document.getelementbyid("main_canvas"); var ctx = c.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.strokestyle="#ff0000"; ctx.beginpath(); ctx.arc(500, 235, 90, 0, 2 * math.pi); ctx.stroke(); } function rectangle() { create(); var c = document.getelementbyid("main_canvas"); var ctx = c.getcontext("2d"); ctx.rect(300, 180, 250, 100); ctx.fillstyle="cyan"; ctx.strokestyle="#ff0000"; ctx.stroke(); } function square() { create(); var c = document.getelementbyid("main_canvas"); var ctx = c.getcontext("2d"); ctx.rect(370, 180, 250, 250); ctx.fillstyle="cyan"; ctx.strokestyle="#ff0000"; ctx.stroke(); } function rainbow() { create(); var bar = new progressbar.semicircle(container, { strokewidth: 4.5, easing: 'linear', duration: 1700, color: '#ffea82', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); var bar1 = new progressbar.semicircle(container1, { strokewidth: 4, easing: 'linear', duration: 2200, color: 'black', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); var bar2 = new progressbar.semicircle(container2, { strokewidth: 4, easing: 'linear', duration: 2200, color: 'red', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); var bar3 = new progressbar.semicircle(container3, { strokewidth: 4, easing: 'linear', duration: 2200, color: 'cyan', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); var bar4 = new progressbar.semicircle(container4, { strokewidth: 4, easing: 'linear', duration: 2200, color: 'yellow', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); var bar5 = new progressbar.semicircle(container5, { strokewidth: 4, easing: 'linear', duration: 2200, color: 'red', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); var bar6 = new progressbar.semicircle(container6, { strokewidth: 4, easing: 'linear', duration: 2200, color: 'blue', trailcolor: '#eee', trailwidth: 1, svgstyle: null }); bar.animate(1.0); bar1.animate(1.0); bar2.animate(1.0); bar3.animate(1.0); bar4.animate(1.0); bar5.animate(1.0); bar6.animate(1.0); // number 0.0 1.0 } function remove() { var el = document.getelementbyid('cvc'); var element = document.getelementbyid('main_canvas'); el.removechild(element); } function create() { remove('main_canvas'); var canvas = document.createelement('canvas'); canvas.setattribute('id', 'main_canvas'); canvas.setattribute('width', '1000'); canvas.setattribute('height', '500'); var el = document.getelementbyid('cvc'); el.appendchild(canvas); }#main_canvas { border: 1px solid #000; } .canvas_button { width: 80px; color: #fff; height: 39px; background-color: #000; border: 1px solid #fff; } .circle_button { font-size: 25px; position: relative; bottom: 464px; right: 134px; float: right; width: 147px; height: 47px; } .rectangle_button { font-size: 25px; position: relative; bottom: 406px; left: 14px; float: right; width: 147px; height: 47px; } .square_button { font-size: 25px; position: relative; bottom: 349px; left: 161px; float: right; width: 147px; height: 47px; } .animated_button { font-size: 25px; position: relative; bottom: 289px; left: 308px; float: right; width: 146px; height: 62px; } #container { margin: 40px; width: 360px; height: 80px; } #container1 { position:relative; bottom:104px; left:15px; margin: 40px; width: 328px; height: 100px; } #container2 { position:relative; top:126px; right:15px; margin: 40px; width: 388px; height: 100px; } #container3 { position:relative; top:250px; right:32px; margin: 40px; width: 422px; height: 100px; } #container4 { position:relative; top:372px; right:48px; margin: 40px; width: 457px; height: 100px; } #container5 { position:relative; bottom:232px; left:29px; margin: 40px; width: 300px; height: 100px; }<!doctype html> <html> <head> <title>js_module_canvas</title> <link rel="stylesheet" type="text/css" href="js_module_vishal.css"/> <script src="js_module_vishal.js"></script> </head> <body> <p id="cvc"> <canvas id="main_canvas" width="1000" height="500"> </canvas> </p> <div> <button type="button" id="cir" class="circle_button canvas_button" onclick="circle()">circle</button> </div> <div> <button type="button" id="rec" class="rectangle_button canvas_button" onclick="rectangle()">rectangle</button> </div> <div> <button type="button" id="sqr" class="square_button canvas_button" onclick="square()">square</button> </div> <div> <button type="button" class="animated_button canvas_button" onclick="rainbow()">animated rainbow </button> <div id="container4"></div> <div id="container3"></div> <div id="container2"></div> <div id="container"></div> <div id="container1"></div> <div id="container5"></div> <div id="container6"></div> </div> https://stackoverflow.com/questions/ask# </body> </html>
the script throws undefined error because didn't include progressbar.js in script.
function circle() { create(); var c = document.getelementbyid("main_canvas"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#ff0000"; ctx.strokestyle = "#ff0000"; ctx.beginpath(); ctx.arc(500, 235, 90, 0, 2 * math.pi); ctx.stroke(); } function rectangle() { create(); var c = document.getelementbyid("main_canvas"); var ctx = c.getcontext("2d"); ctx.rect(300, 180, 250, 100); ctx.fillstyle = "cyan"; ctx.strokestyle = "#ff0000"; ctx.stroke(); } function square() { create(); var c = document.getelementbyid("main_canvas"); var ctx = c.getcontext("2d"); ctx.rect(370, 180, 250, 250); ctx.fillstyle = "cyan"; ctx.strokestyle = "#ff0000"; ctx.stroke(); } function rainbow() { create(); var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; var arcwidth = 15; var radius = 8 * arcwidth; var rainbow = document.getelementbyid("main_canvas"); var context = rainbow.getcontext("2d"); var drawarc = function(color) { context.beginpath(); context.arc( rainbow.width / 2, rainbow.height + arcwidth / 2, radius, math.pi, 2 * math.pi ); context.linewidth = arcwidth; context.strokestyle = color; context.stroke(); context.closepath(); radius += arcwidth; }; colors.reverse().foreach(drawarc); } function remove() { var el = document.getelementbyid('cvc'); var element = document.getelementbyid('main_canvas'); el.removechild(element); } function create() { remove('main_canvas'); var canvas = document.createelement('canvas'); canvas.setattribute('id', 'main_canvas'); canvas.setattribute('width', '1000'); canvas.setattribute('height', '500'); var el = document.getelementbyid('cvc'); el.appendchild(canvas); }#main_canvas { border: 1px solid #000; } .canvas_button { width: 80px; color: #fff; height: 39px; background-color: #000; border: 1px solid #fff; } .circle_button { font-size: 25px; position: relative; bottom: 464px; right: 134px; float: right; width: 147px; height: 47px; } .rectangle_button { font-size: 25px; position: relative; bottom: 406px; left: 14px; float: right; width: 147px; height: 47px; } .square_button { font-size: 25px; position: relative; bottom: 349px; left: 161px; float: right; width: 147px; height: 47px; } .animated_button { font-size: 25px; position: relative; bottom: 289px; left: 308px; float: right; width: 146px; height: 62px; } #container { margin: 40px; width: 360px; height: 80px; } #container1 { position: relative; bottom: 104px; left: 15px; margin: 40px; width: 328px; height: 100px; } #container2 { position: relative; top: 126px; right: 15px; margin: 40px; width: 388px; height: 100px; } #container3 { position: relative; top: 250px; right: 32px; margin: 40px; width: 422px; height: 100px; } #container4 { position: relative; top: 310px; right: 48px; margin: 40px; width: 457px; height: 100px; } #container5 { position: relative; bottom: 232px; left: 29px; margin: 40px; width: 300px; height: 100px; } #container6 { position: relative; bottom: 360px; left: 42px; margin: 40px; width: 275px; height: 65px; }<p id="cvc"> <canvas id="main_canvas" width="1000" height="500"></canvas> </p> <div> <button type="button" id="cir" class="circle_button canvas_button" onclick="circle()">circle</button> </div> <div> <button type="button" id="rec" class="rectangle_button canvas_button" onclick="rectangle()">rectangle</button> </div> <div> <button type="button" id="sqr" class="square_button canvas_button" onclick="square()">square</button> </div> <div> <button type="button" class="animated_button canvas_button" onclick="rainbow()">animated rainbow</button> </div>
Comments
Post a Comment