1
我有一个算法用于在画布HTML中绘制由点给出的行程。 Evrything可以正常工作，但不会在我的要点上添加名称。在画布上绘制文本HTML会停止我的算法
<html>
<head>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
\t
\t <body>
\t \t <canvas id="mycanvas" width="100" height="100" style="margin-top: 20px; margin-left: 50px;"></canvas>
\t \t <script type='text/javascript'>
window.onload=function(){
\t \t \t
\t var jsonServicesTT = [{"NAME":"Elephant","DIRECTION":"4"},{"NAME":"Sunshine","DIRECTION":"4"},{"NAME":"Flower","DIRECTION":"4"},{"NAME":"Abricot","DIRECTION":"4"},{"NAME":"Cake","DIRECTION":"4"},{"NAME":"Mouse","DIRECTION":"4"},{"NAME":"Uther","DIRECTION":"3"},{"NAME":"Arriba","DIRECTION":"3"},{"NAME":"Hola","DIRECTION":"3"},{"NAME":"Elephant","DIRECTION":"3"}];
\t
\t widthCan = 792;
\t heightCan = 423;
\t width = widthCan - 150;
\t height = heightCan - 130;
\t var perimetre = (width * 2 + height * 2);
\t var colors = [];
\t var colorTemp = '';
\t var table = [];
\t var direction = [];
\t var resteFaire = [];
\t var doubleColor = '';
\t var nbSegment = 0;
\t var percent = 0;
\t var up =0;
\t var right = 1;
\t var left = 0;
\t var bot = 0;
\t var tailleSegment = 0;
\t var decalX = 75;
\t var decalY = 60;
\t var NAME = '';
\t
\t
\t var cRot='';
\t var cRot2 = '';
\t cRot = document.getElementById("mycanvas");
\t ctxRot = cRot.getContext('2d');
\t ctxRot.canvas.width = widthCan;
\t ctxRot.canvas.height = heightCan;
\t
\t function findColors(direction){
\t \t switch(direction)
\t \t {
\t \t \t case '1':
\t \t \t \t colors.push('red');
\t \t \t \t colorTemp = 'red';
\t \t \t \t break;
\t \t \t case '2':
\t \t \t \t colors.push('blue');
\t \t \t \t colorTemp = 'blue';
\t \t \t \t break;
\t \t \t case '3':
\t \t \t \t colors.push('DeepSkyBlue');
\t \t \t \t colorTemp = 'DeepSkyBlue';
\t \t \t \t break;
\t \t \t case '4':
\t \t \t \t colors.push('Green');
\t \t \t \t colorTemp = 'Green';
\t \t \t \t break;
\t \t \t default:
\t \t \t \t colors.push('Darkorange'); \t \t
\t \t \t \t colorTemp = 'Darkorange';
\t \t } \t
\t }
\t /************** Rounded Rect *************/
\t function roundRect(x, y, w, h, radius) {
\t \t var r = x + w;
\t \t var b = y + h;
\t \t ctxRot.beginPath();
\t \t ctxRot.strokeStyle = "#BDBDBD";
\t \t ctxRot.lineWidth = "2";
\t \t ctxRot.moveTo(x + radius, y);
\t \t ctxRot.lineTo(r - radius, y);
\t \t ctxRot.quadraticCurveTo(r, y, r, y + radius);
\t \t ctxRot.lineTo(r, y + h - radius);
\t \t ctxRot.quadraticCurveTo(r, b, r - radius, b);
\t \t ctxRot.lineTo(x + radius, b);
\t \t ctxRot.quadraticCurveTo(x, b, x, b - radius);
\t \t ctxRot.lineTo(x, y + radius);
\t \t ctxRot.quadraticCurveTo(x, y, x + radius, y);
\t \t ctxRot.stroke();
\t }
\t
\t function drawCircle(centerXFrom, centerYFrom, color){
\t \t var radius = 5;
\t \t ctxRot.beginPath();
\t \t ctxRot.arc(centerXFrom + decalX, centerYFrom + decalY, radius, 0, 2 * Math.PI, false);
\t \t ctxRot.fillStyle = color;
\t \t ctxRot.fill();
\t \t ctxRot.lineWidth = 1;
\t \t ctxRot.strokeStyle = '#003300';
\t \t ctxRot.stroke();
\t \t ctxRot.beginPath();
\t \t /*if(bot == 1){
\t \t \t ctxRot.translate(centerXFrom, centerYFrom);
\t \t \t ctxRot.rotate(-Math.PI/4);
\t \t \t ctxRot.fillText(NAME, name.length - 50 , name.length);
\t \t \t ctxRot.restore();
\t \t }*/
\t
\t }
\t \t
\t function getSide(leg, taille) {
\t \t findColors(leg["DIRECTION"]);
\t \t NAME = leg["NAME"];
\t \t if(right == 1 && taille < (height - yPrec)) { //si on peut placer le point sur le même côté que précédemment
\t \t \t yPrec += taille;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t \t else if (right == 1 && taille > (height - yPrec)) {
\t \t \t var reste = height - yPrec; //calcul de combien de right il y a
\t \t \t if(reste > width){ //si on passe de right à left sans passer par bot
\t \t \t \t var resteY = reste - width;
\t \t \t \t yPrec = height - resteY;
\t \t \t \t xPrec = 0;
\t \t \t \t right = 0;
\t \t \t \t bot = 0;
\t \t \t \t up =0;
\t \t \t \t left = 1;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t \t
\t \t \t }
\t \t \t else //si on passe de right à bot
\t \t \t {
\t \t \t \t var resteX = taille - reste; // calcul de combien il reste de distance après avoir déduit le right
\t \t \t \t xPrec = width - resteX; // positionnement du point en Bot x
\t \t \t \t yPrec = height;
\t \t \t \t //writeBot(leg["NAME"], xPrec, yPrec); \t
\t \t \t \t right = 0;
\t \t \t \t bot = 1;
\t \t \t \t up =0;
\t \t \t \t left = 0; \t
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME); \t \t \t \t \t \t \t \t
\t \t \t }
\t \t \t \t
\t \t }
\t \t else if (bot == 1 && taille < xPrec){ //si on peut placer le point sur le même côté que précédemment
\t \t \t xPrec = xPrec - taille;
\t \t \t yPrec = height;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t \t
\t \t }
\t \t else if(bot == 1 && taille > xPrec){ // si le nouveau point ne peut pas être sur le bot
\t \t \t var resteY = taille - xPrec;
\t \t \t if(resteY > height){ //si on passe de bot à up
\t \t \t \t xPrec = resteY - height;
\t \t \t \t yPrec = 0;
\t \t \t \t right = 0;
\t \t \t \t bot = 0;
\t \t \t \t up =1;
\t \t \t \t left = 0;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME); \t \t \t \t
\t \t \t \t \t
\t \t \t }
\t \t \t else{ //si on passe de bot à left
\t \t \t \t yPrec = height - resteY;
\t \t \t \t xPrec = 0;
\t \t \t \t bot = 0;
\t \t \t \t left = 1;
\t \t \t \t right = 0;
\t \t \t \t up =0;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t }
\t \t \t
\t \t }
\t \t else if (left == 1 && taille < yPrec){
\t \t \t yPrec = yPrec - taille;
\t \t \t xPrec = 0;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t \t else if (left == 1 && taille > yPrec){
\t \t \t var resteX = taille - yPrec;
\t \t \t if (resteX > width){ //si on passe de left à right
\t \t \t \t yPrec = resteX - width;
\t \t \t \t xPrec = 0;
\t \t \t \t up = 0;
\t \t \t \t bot = 0;
\t \t \t \t left = 0;
\t \t \t \t right = 1;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t }
\t \t \t else{ //si on passe de left à bot
\t \t \t \t xPrec = resteX;
\t \t \t \t yPrec = 0;
\t \t \t \t up = 1;
\t \t \t \t bot = 0;
\t \t \t \t left = 0;
\t \t \t \t right = 0;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t }
\t \t \t
\t \t }
\t \t else if(up == 1 && taille < (width - xPrec)){
\t \t \t xPrec += taille;
\t \t \t yPrec = 0;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t \t else if(up == 1 && taille > (width - xPrec)){
\t \t \t var resteX = width - xPrec;
\t \t \t xPrec = width;
\t \t \t yPrec = taille - resteX;
\t \t \t up = 0;
\t \t \t bot = 0;
\t \t \t left = 0;
\t \t \t right = 1;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t
\t \t
\t }
\t
\t function drawCircleFirst(X, Y) {
\t \t if(jsonServicesTT[0]["NAME"] == jsonServicesTT[(jsonServicesTT.length) - 1]["NAME"])
\t \t {
\t \t \t table.push(jsonServicesTT[0]);
\t \t \t table.push(jsonServicesTT[(jsonServicesTT.length) - 1]);
\t \t \t for(var i = 0; i < table.length; i++){
\t \t \t \t findColors(table[i]["DIRECTION"]);
\t \t \t }
\t \t \t doubleColor = true;
\t \t }
\t \t
\t \t else
\t \t {
\t \t \t findColors(table[0]["DIRECTION"]);
\t \t \t doubleColor = false;
\t \t } \t \t
\t \t
\t \t var radius = 6;
\t \t var currentAngle = -0.5 * Math.PI;
\t \t for (var i = 0; i < 2; i++) {
\t \t \t var sliceAngle = 0.5 * 2 * Math.PI;
\t \t \t ctxRot.beginPath();
\t \t \t ctxRot.arc(X + decalX, Y + decalY, radius,currentAngle, currentAngle + sliceAngle);
\t \t \t ctxRot.strokeStyle = '#003300';
\t \t \t ctxRot.stroke();
\t \t \t currentAngle += sliceAngle;
\t \t \t ctxRot.lineTo(X + decalX, X + decalX);
\t \t \t ctxRot.fillStyle = colors[i];
\t \t \t
\t \t \t ctxRot.fill();
\t \t }
\t }
\t
\t function getProportion(){
\t \t if(doubleColor){
\t \t \t nbSegment = jsonServicesTT.slice(1).length;
\t \t }
\t \t else nbSegment = jsonServicesTT.length;
\t \t percent = 100/nbSegment;
\t \t tailleSegment = (perimetre*percent)/100;
\t \t
\t \t for (var i = 1; i < nbSegment; i++){//premier et dernier points déjà placés
\t \t \t getSide(jsonServicesTT[i], tailleSegment);
\t \t } \t \t
\t }
\t \t
\t roundRect(decalX, decalY, width, height, 20);
\t var firstPointX = width ;
\t var firstPointY = (height/2);
\t yPrec = firstPointY;
\t xPrec = firstPointX;
\t drawCircleFirst(firstPointX, firstPointY);
\t getProportion();
}
\t \t </script> \t
\t </body>
</html>但是当你取消注释部分用于插入文本在画圆（因为我只是想使它在第一次工作，请不要照顾名称的位置）功能，你可以看到我的点不再绘制。 我猜这是一个上下文问题，因为我的名字采用了点的颜色，但我不知道如何解决这个问题。
<html>
<head>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
\t
\t <body>
\t \t <canvas id="mycanvas" width="100" height="100" style="margin-top: 20px; margin-left: 50px;"></canvas>
\t \t <script type='text/javascript'>
window.onload=function(){
\t \t \t
\t var jsonServicesTT = [{"NAME":"Elephant","DIRECTION":"4"},{"NAME":"Sunshine","DIRECTION":"4"},{"NAME":"Flower","DIRECTION":"4"},{"NAME":"Abricot","DIRECTION":"4"},{"NAME":"Cake","DIRECTION":"4"},{"NAME":"Mouse","DIRECTION":"4"},{"NAME":"Uther","DIRECTION":"3"},{"NAME":"Arriba","DIRECTION":"3"},{"NAME":"Hola","DIRECTION":"3"},{"NAME":"Elephant","DIRECTION":"3"}];
\t
\t widthCan = 792;
\t heightCan = 423;
\t width = widthCan - 150;
\t height = heightCan - 130;
\t var perimetre = (width * 2 + height * 2);
\t var colors = [];
\t var colorTemp = '';
\t var table = [];
\t var direction = [];
\t var resteFaire = [];
\t var doubleColor = '';
\t var nbSegment = 0;
\t var percent = 0;
\t var up =0;
\t var right = 1;
\t var left = 0;
\t var bot = 0;
\t var tailleSegment = 0;
\t var decalX = 75;
\t var decalY = 60;
\t var NAME = '';
\t
\t
\t var cRot='';
\t var cRot2 = '';
\t cRot = document.getElementById("mycanvas");
\t ctxRot = cRot.getContext('2d');
\t ctxRot.canvas.width = widthCan;
\t ctxRot.canvas.height = heightCan;
\t
\t function findColors(direction){
\t \t switch(direction)
\t \t {
\t \t \t case '1':
\t \t \t \t colors.push('red');
\t \t \t \t colorTemp = 'red';
\t \t \t \t break;
\t \t \t case '2':
\t \t \t \t colors.push('blue');
\t \t \t \t colorTemp = 'blue';
\t \t \t \t break;
\t \t \t case '3':
\t \t \t \t colors.push('DeepSkyBlue');
\t \t \t \t colorTemp = 'DeepSkyBlue';
\t \t \t \t break;
\t \t \t case '4':
\t \t \t \t colors.push('Green');
\t \t \t \t colorTemp = 'Green';
\t \t \t \t break;
\t \t \t default:
\t \t \t \t colors.push('Darkorange'); \t \t
\t \t \t \t colorTemp = 'Darkorange';
\t \t } \t
\t }
\t /************** Rounded Rect *************/
\t function roundRect(x, y, w, h, radius) {
\t \t var r = x + w;
\t \t var b = y + h;
\t \t ctxRot.beginPath();
\t \t ctxRot.strokeStyle = "#BDBDBD";
\t \t ctxRot.lineWidth = "2";
\t \t ctxRot.moveTo(x + radius, y);
\t \t ctxRot.lineTo(r - radius, y);
\t \t ctxRot.quadraticCurveTo(r, y, r, y + radius);
\t \t ctxRot.lineTo(r, y + h - radius);
\t \t ctxRot.quadraticCurveTo(r, b, r - radius, b);
\t \t ctxRot.lineTo(x + radius, b);
\t \t ctxRot.quadraticCurveTo(x, b, x, b - radius);
\t \t ctxRot.lineTo(x, y + radius);
\t \t ctxRot.quadraticCurveTo(x, y, x + radius, y);
\t \t ctxRot.stroke();
\t }
\t
\t function drawCircle(centerXFrom, centerYFrom, color){
\t \t var radius = 5;
\t \t ctxRot.beginPath();
\t \t ctxRot.arc(centerXFrom + decalX, centerYFrom + decalY, radius, 0, 2 * Math.PI, false);
\t \t ctxRot.fillStyle = color;
\t \t ctxRot.fill();
\t \t ctxRot.lineWidth = 1;
\t \t ctxRot.strokeStyle = '#003300';
\t \t ctxRot.stroke();
\t \t ctxRot.beginPath();
\t \t if(bot == 1){
\t \t \t ctxRot.translate(centerXFrom, centerYFrom);
\t \t \t ctxRot.rotate(-Math.PI/4);
\t \t \t ctxRot.fillText(NAME, name.length - 50 , name.length);
\t \t \t ctxRot.restore();
\t \t }
\t
\t }
\t \t
\t function getSide(leg, taille) {
\t \t findColors(leg["DIRECTION"]);
\t \t NAME = leg["NAME"];
\t \t if(right == 1 && taille < (height - yPrec)) { //si on peut placer le point sur le même côté que précédemment
\t \t \t yPrec += taille;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t \t else if (right == 1 && taille > (height - yPrec)) {
\t \t \t var reste = height - yPrec; //calcul de combien de right il y a
\t \t \t if(reste > width){ //si on passe de right à left sans passer par bot
\t \t \t \t var resteY = reste - width;
\t \t \t \t yPrec = height - resteY;
\t \t \t \t xPrec = 0;
\t \t \t \t right = 0;
\t \t \t \t bot = 0;
\t \t \t \t up =0;
\t \t \t \t left = 1;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t \t
\t \t \t }
\t \t \t else //si on passe de right à bot
\t \t \t {
\t \t \t \t var resteX = taille - reste; // calcul de combien il reste de distance après avoir déduit le right
\t \t \t \t xPrec = width - resteX; // positionnement du point en Bot x
\t \t \t \t yPrec = height;
\t \t \t \t //writeBot(leg["NAME"], xPrec, yPrec); \t
\t \t \t \t right = 0;
\t \t \t \t bot = 1;
\t \t \t \t up =0;
\t \t \t \t left = 0; \t
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME); \t \t \t \t \t \t \t \t
\t \t \t }
\t \t \t \t
\t \t }
\t \t else if (bot == 1 && taille < xPrec){ //si on peut placer le point sur le même côté que précédemment
\t \t \t xPrec = xPrec - taille;
\t \t \t yPrec = height;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t \t
\t \t }
\t \t else if(bot == 1 && taille > xPrec){ // si le nouveau point ne peut pas être sur le bot
\t \t \t var resteY = taille - xPrec;
\t \t \t if(resteY > height){ //si on passe de bot à up
\t \t \t \t xPrec = resteY - height;
\t \t \t \t yPrec = 0;
\t \t \t \t right = 0;
\t \t \t \t bot = 0;
\t \t \t \t up =1;
\t \t \t \t left = 0;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME); \t \t \t \t
\t \t \t \t \t
\t \t \t }
\t \t \t else{ //si on passe de bot à left
\t \t \t \t yPrec = height - resteY;
\t \t \t \t xPrec = 0;
\t \t \t \t bot = 0;
\t \t \t \t left = 1;
\t \t \t \t right = 0;
\t \t \t \t up =0;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t }
\t \t \t
\t \t }
\t \t else if (left == 1 && taille < yPrec){
\t \t \t yPrec = yPrec - taille;
\t \t \t xPrec = 0;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t \t else if (left == 1 && taille > yPrec){
\t \t \t var resteX = taille - yPrec;
\t \t \t if (resteX > width){ //si on passe de left à right
\t \t \t \t yPrec = resteX - width;
\t \t \t \t xPrec = 0;
\t \t \t \t up = 0;
\t \t \t \t bot = 0;
\t \t \t \t left = 0;
\t \t \t \t right = 1;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t }
\t \t \t else{ //si on passe de left à bot
\t \t \t \t xPrec = resteX;
\t \t \t \t yPrec = 0;
\t \t \t \t up = 1;
\t \t \t \t bot = 0;
\t \t \t \t left = 0;
\t \t \t \t right = 0;
\t \t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t \t }
\t \t \t
\t \t }
\t \t else if(up == 1 && taille < (width - xPrec)){
\t \t \t xPrec += taille;
\t \t \t yPrec = 0;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t \t else if(up == 1 && taille > (width - xPrec)){
\t \t \t var resteX = width - xPrec;
\t \t \t xPrec = width;
\t \t \t yPrec = taille - resteX;
\t \t \t up = 0;
\t \t \t bot = 0;
\t \t \t left = 0;
\t \t \t right = 1;
\t \t \t drawCircle(xPrec, yPrec, colorTemp, NAME);
\t \t }
\t
\t \t
\t }
\t
\t function drawCircleFirst(X, Y) {
\t \t if(jsonServicesTT[0]["NAME"] == jsonServicesTT[(jsonServicesTT.length) - 1]["NAME"])
\t \t {
\t \t \t table.push(jsonServicesTT[0]);
\t \t \t table.push(jsonServicesTT[(jsonServicesTT.length) - 1]);
\t \t \t for(var i = 0; i < table.length; i++){
\t \t \t \t findColors(table[i]["DIRECTION"]);
\t \t \t }
\t \t \t doubleColor = true;
\t \t }
\t \t
\t \t else
\t \t {
\t \t \t findColors(table[0]["DIRECTION"]);
\t \t \t doubleColor = false;
\t \t } \t \t
\t \t
\t \t var radius = 6;
\t \t var currentAngle = -0.5 * Math.PI;
\t \t for (var i = 0; i < 2; i++) {
\t \t \t var sliceAngle = 0.5 * 2 * Math.PI;
\t \t \t ctxRot.beginPath();
\t \t \t ctxRot.arc(X + decalX, Y + decalY, radius,currentAngle, currentAngle + sliceAngle);
\t \t \t ctxRot.strokeStyle = '#003300';
\t \t \t ctxRot.stroke();
\t \t \t currentAngle += sliceAngle;
\t \t \t ctxRot.lineTo(X + decalX, X + decalX);
\t \t \t ctxRot.fillStyle = colors[i];
\t \t \t
\t \t \t ctxRot.fill();
\t \t }
\t }
\t
\t function getProportion(){
\t \t if(doubleColor){
\t \t \t nbSegment = jsonServicesTT.slice(1).length;
\t \t }
\t \t else nbSegment = jsonServicesTT.length;
\t \t percent = 100/nbSegment;
\t \t tailleSegment = (perimetre*percent)/100;
\t \t
\t \t for (var i = 1; i < nbSegment; i++){//premier et dernier points déjà placés
\t \t \t getSide(jsonServicesTT[i], tailleSegment);
\t \t } \t \t
\t }
\t \t
\t roundRect(decalX, decalY, width, height, 20);
\t var firstPointX = width ;
\t var firstPointY = (height/2);
\t yPrec = firstPointY;
\t xPrec = firstPointX;
\t drawCircleFirst(firstPointX, firstPointY);
\t getProportion();
}
\t \t </script> \t
\t </body>
</html>
谢谢你的解释，这是很好的知道什么是错的，正确显示所有文本。 – So4ne
不客气。学习如何钓鱼比现在吃热饭更重要。两者在一起甚至更好！ :) – enhzflep