Tout ensemble Mais ma toile arc-en-ciel en mouvement ne fonctionne pas

Il y a une toile et quatre boutons. Quatre boutons comme Circle, Rectangle, Square et Rainbow Animé. Lorsque vous cliquez sur le bouton cicle dans canvas circle show.and lorsque vous cliquez sur le bouton rectangle, le rectangle canvas s'affiche sur le canevas.Tout ensemble Mais ma toile arc-en-ciel en mouvement ne fonctionne pas

J'ai fait mon code pour déplacer l'arc-en-ciel sur JSfiddle. Mais quand je cours ce code sur mon sublime local. le code ne fonctionne pas.

quelqu'un peut-il m'aider à résoudre ce problème. Voici mon code:

function circle() 
 
{ 
 

 
\t create(); 
 
\t var c = document.getElementById("main_canvas"); 
 
\t var ctx = c.getContext("2d"); 
 
\t ctx.fillStyle="#FF0000"; 
 
\t ctx.strokeStyle="#FF0000"; 
 
\t ctx.beginPath(); 
 
\t ctx.arc(500, 235, 90, 0, 2 * Math.PI); 
 
\t ctx.stroke(); 
 

 
} 
 
function rectangle() 
 
{ 
 
\t create(); 
 
\t var c = document.getElementById("main_canvas"); 
 
\t var ctx = c.getContext("2d"); 
 
\t ctx.rect(300, 180, 250, 100); 
 
\t ctx.fillStyle="cyan"; 
 
\t ctx.strokeStyle="#FF0000"; 
 
\t ctx.stroke(); 
 
} 
 
function square() 
 
{ 
 
\t create(); 
 
\t var c = document.getElementById("main_canvas"); 
 
\t var ctx = c.getContext("2d"); 
 
\t ctx.rect(370, 180, 250, 250); 
 
\t ctx.fillStyle="cyan"; 
 
\t ctx.strokeStyle="#FF0000"; 
 
\t ctx.stroke(); 
 
} 
 

 
function rainbow() { 
 
\t 
 
\t create(); 
 
\t var bar = new ProgressBar.SemiCircle(container, { 
 
\t strokeWidth: 4.5, 
 
\t easing: 'linear', 
 
\t duration: 1700, 
 
\t color: '#FFEA82', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 
\t var bar1 = new ProgressBar.SemiCircle(container1, { 
 
\t strokeWidth: 4, 
 
\t easing: 'linear', 
 
\t duration: 2200, 
 
\t color: 'black', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 
\t var bar2 = new ProgressBar.SemiCircle(container2, { 
 
\t strokeWidth: 4, 
 
\t easing: 'linear', 
 
\t duration: 2200, 
 
\t color: 'red', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 
\t var bar3 = new ProgressBar.SemiCircle(container3, { 
 
\t strokeWidth: 4, 
 
\t easing: 'linear', 
 
\t duration: 2200, 
 
\t color: 'cyan', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 
\t var bar4 = new ProgressBar.SemiCircle(container4, { 
 
\t strokeWidth: 4, 
 
\t easing: 'linear', 
 
\t duration: 2200, 
 
\t color: 'yellow', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 
\t var bar5 = new ProgressBar.SemiCircle(container5, { 
 
\t strokeWidth: 4, 
 
\t easing: 'linear', 
 
\t duration: 2200, 
 
\t color: 'red', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 
\t var bar6 = new ProgressBar.SemiCircle(container6, { 
 
\t strokeWidth: 4, 
 
\t easing: 'linear', 
 
\t duration: 2200, 
 
\t color: 'blue', 
 
\t trailColor: '#eee', 
 
\t trailWidth: 1, 
 
\t svgStyle: null 
 
\t }); 
 

 
\t bar.animate(1.0); 
 
\t bar1.animate(1.0); 
 
\t bar2.animate(1.0); 
 
\t bar3.animate(1.0); 
 
\t bar4.animate(1.0); 
 
\t bar5.animate(1.0); 
 
\t bar6.animate(1.0); 
 
\t // Number from 0.0 to 1.0 
 

 
\t } 
 

 
\t function remove() { 
 
\t var el = document.getElementById('cvc'); 
 
\t var element = document.getElementById('main_canvas'); 
 
\t el.removeChild(element); 
 
\t } 
 

 
\t function create() { 
 
\t \t remove('main_canvas'); 
 
\t  var canvas = document.createElement('canvas'); 
 
\t  canvas.setAttribute('id', 'main_canvas'); 
 
\t  canvas.setAttribute('width', '1000'); 
 
\t  canvas.setAttribute('height', '500'); 
 
\t  var el = document.getElementById('cvc'); 
 
\t  el.appendChild(canvas); 
 
\t }

#main_canvas 
 
{ 
 
\t border: 1px solid #000; 
 
\t 
 
} 
 
.canvas_button 
 
{ 
 
\t width: 80px; 
 
\t color: #fff; 
 
\t height: 39px; 
 
\t background-color: #000; 
 
\t border: 1px solid #fff; 
 
} 
 
.circle_button 
 
{ 
 
\t font-size: 25px; 
 
    position: relative; 
 
    bottom: 464px; \t 
 
    right: 134px; 
 
    float: right; 
 
    width: 147px; 
 
    height: 47px; 
 
} 
 
.rectangle_button 
 
{ 
 
\t font-size: 25px; 
 
    position: relative; 
 
    bottom: 406px; 
 
    left: 14px; 
 
    float: right; 
 
    width: 147px; 
 
    height: 47px; 
 

 
} 
 
.square_button 
 
{ 
 
\t font-size: 25px; 
 
    position: relative; 
 
    bottom: 349px; 
 
    left: 161px; 
 
    float: right; 
 
    width: 147px; 
 
    height: 47px; 
 
} 
 
.animated_button 
 
{ 
 
\t 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> 
 
\t <title>JS_module_Canvas</title> 
 
\t <link rel="stylesheet" type="text/css" href="js_module_vishal.css"/> 
 
\t <script src="js_module_vishal.js"></script> 
 
</head> 
 
<body> 
 
<p id="cvc"> 
 
\t <canvas id="main_canvas" width="1000" height="500"> 
 
\t \t 
 
\t </canvas> 
 
</p> 
 
<div> 
 
\t <button type="button" id="cir" class="circle_button canvas_button" onclick="circle()">Circle</button> 
 
</div> 
 
<div> 
 
\t <button type="button" id="rec" class="rectangle_button canvas_button" onclick="rectangle()">Rectangle</button> 
 
</div> 
 
<div> \t 
 
\t <button type="button" id="sqr" class="square_button canvas_button" onclick="square()">Square</button> 
 
</div> 
 
<div> 
 
\t <button type="button" class="animated_button canvas_button" onclick="rainbow()">Animated Rainbow 
 
\t 
 
\t 
 
\t </button> 
 
    <div id="container4"></div> 
 
\t \t <div id="container3"></div> 
 
\t \t <div id="container2"></div> 
 
\t \t <div id="container"></div> 
 
\t \t <div id="container1"></div> 
 
\t \t <div id="container5"></div> 
 
\t \t <div id="container6"></div> 
 
</div> 
 
https://stackoverflow.com/questions/ask# 
 
</body> 
 
</html>

Source

2017-08-18 Vishu D' cruz

Le script génère une erreur non définie parce que vous n'avez pas inclus progressbar.js dans votre 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>

Source

2017-08-18 05:04:46

Merci beaucoup @Jinu kurian –

, mais il y a un problème .. d'abord une chute que je veux spectacle arc-en-animation que dans la toile non à l'extérieur de la toile. et la deuxième chose est à chaque fois que je clique sur le bouton arc-en-ciel, ils montrent le nouveau ranibow .. et la position du changement de bande arc-en-ciel .. alors que dois-je faire pour résoudre ce problème .. –

@ VishuD'cruz Je ne pense pas que vous pouvez afficher l'arc-en-ciel sur toile parce que c'est un élément DOM. Vous devez positionner cet absolu. –

Tout ensemble Mais ma toile arc-en-ciel en mouvement ne fonctionne pas

Répondre

Questions connexes