2

我正在尝试自学 javascript 和 HTML5，（刚刚开始），并且对于画布的一些练习，我试图将这个图表变成画布上的交互式图表，单击一个单词会打开下面的一些树，并且很快。我不能发布它的图片，因为我在这里太新了，抱歉。

问题是，我所做的代码都按照我的意愿工作（耶！），但它已经很长了，并且要映射图表的其余部分（到目前为止我只完成了一小部分）它将是 JavaScript 中的战争与和平。所以我想知道是否有人可以看看我的代码并告诉我如何让它更简洁？

我在谷歌上搜索过，并查看了有关 javascript 的书籍，但没有任何反应。我也将尝试使用 SVG 进行练习，并怀疑它可能更有效，但由于我特别想学习 javascript+canvas，我真的希望这种方式也能很好地工作。提前感谢您的帮助。

这是我的代码：

onload = BDS;
var called = false;

function BDS() {

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

}

function q(event) {
event = event || window.event;

var canvas = document.getElementById("canvas"),
x = event.pageX - canvas.offsetLeft,
y = event.pageY - canvas.offsetTop;

//alert(x + ' ' + y);
if (x < 295 && x > 120 && y > 60 && y < 110){
    called = false;
    buddha();
}

if (x < 600 && x > 400 && y > 60 && y < 110) {
    called = true;
    dhamma();   
}

if (x < 880 && x > 710 && y > 60 && y < 110) {
    called = false;
    sangha();
}

if (called === true && x < 330 && x > 140 && y > 260 && y <300) {
    alert("yay"); 
}


}



function buddha() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 750);

ctx.beginPath();
ctx.moveTo(185, 120);
ctx.lineTo(500, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Accomplished", 500, 300);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Fully Enlightened", 500, 350);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Perfect in True Knowledge and Conduct", 500, 400);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Sublime", 500, 450);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Knower of Worlds", 500, 500);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Incomparable Leader of Persons to be Tamed", 500, 550);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Teacher of Gods and Humans", 500, 600);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Blessed", 500, 650);
}

function sangha(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 750);

ctx.beginPath();
ctx.moveTo(800, 120);
ctx.lineTo(270, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(840, 120);
ctx.lineTo(680, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "right";
ctx.fillText("Monastic Sangha     ", 500, 300);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Nuns                ", 500, 350);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Monks               ", 500, 400);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Novice Nuns         ", 500, 450);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Novice Monks        ", 500, 500);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "left";
ctx.fillText("     Noble Sangha", 500, 300);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("          Arahants", 500, 350);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("      Non-Returners", 500, 400);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("     Once-Returners", 500, 450);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("     Stream-Enterers", 500, 500);
}

function dhamma() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 750);

ctx.beginPath();
ctx.moveTo(500, 120);
ctx.lineTo(235, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(505, 120);
ctx.lineTo(420, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(510, 120);
ctx.lineTo(620, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(515, 120);
ctx.lineTo(805, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#09F";
ctx.textAlign = "center";
ctx.fillText("Suffering    Origin    Cessation    Path", 500, 300);
}
4

0 回答 0