一切就绪，但我的移动彩虹画布不起作用

Question

有一个画布和四个按钮。 四个按钮，如圆形，矩形，方形和动画彩虹。 当您单击画布圆圈显示中的 cicle 按钮时，当您单击矩形按钮时，矩形画布显示在画布上。

我完成了在 JSfiddle 上移动彩虹的代码。 但是当我在本地崇高上运行该代码时。代码不起作用。

谁能帮我解决这个问题。 这是我的代码：

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 from 0.0 to 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>

Answer 1

脚本引发未定义的错误，因为脚本中未包含进度栏.js。

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>