彩虹

彩虹

关注
发信
关注(28)粉丝(399)

javascript - 全部设置但我的移动彩虹 Canvas 不起作用

有一个画布和四个按钮。
四个按钮，例如“圆”，“矩形”，“正方形”和“动画彩虹”。
当您单击画布圆形显示中的cicle按钮时，以及单击矩形按钮时，则在画布上显示矩形画布。

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

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



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>

最佳答案

该脚本引发未定义的错误，因为您没有在脚本中包含progressbar.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>

关于javascript - 全部设置但我的移动彩虹 Canvas 不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45748740/

10-09 20:54
Powered by LMLPHP ©2024 彩虹 0.045653