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