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

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj...
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer ...
Read more

c# - Asp.net web api : redirect unauthorized requst to forbidden page -

im trying redirect unauthorized request forbidden page instead i'm getting forbidden page in response body , how can fix ? here's startup class : app.createperowincontext(storecontext.create); app.createperowincontext<applicationusermanager>(applicationusermanager.create); app.createperowincontext<applicationsigninmanager>(applicationsigninmanager.create); app.usecookieauthentication(new cookieauthenticationoptions { authenticationtype = defaultauthenticationtypes.applicationcookie, expiretimespan = timespan.fromdays(30), }); app.useexternalsignincookie(defaultauthenticationtypes.externalcookie); app.usetwofactorsignincookie(defaultauthenticationtypes.twofactorcookie, timespan.fromminutes(5)); app.usetwofactorrememberbrowsercookie(defaultauthenticationtypes.twofactorrememberbrowsercookie); the method im trying reach : [httpget] [authorize(roles = "admin")] public string getcurrentusername() { return userman...
Read more