1
這是html文件中的一部分，它應該在第一次加載時創建一個新的HangmanView，這工作正常但是當我想通過按下按鈕來繪製部件時，它什麼都不做。我想通過點擊一個HTML按鈕在畫布上畫一條線，我試過但它不起作用
<!DOCTYPE>
<html>
<head>
<title> Draw Hangman</title>
<link rel="stylesheet" href="hangman.css" type="text/css"/>
<script src="hangman.js" language="javascript" type="text/javascript"/>
</head>
<script>
var hm = null;
</script>
<body>
<article>
<h1>Drawing Hangman Part</h1>
<canvas id="hangman" onload="hm = new HangmanView(document.getElementById('hangman'));">Sorry your browser doesn"t support canvas</canvas><br/>
<input id="drawbutton0" type="button" value="Floor" onClick="hm.drawPart(0);"/>
<input id="drawbutton1" type="button" value="V. Beam" onClick="hm.drawPart(1);"/>
<input id="drawbutton2" type="button" value="Bridging" onClick="hm.drawPart(2);"/><br/>
<input id="drawbutton3" type="button" value="H. Beam" onClick="hm.drawPart(3);"/>
<input id="drawbutton4" type="button" value="Rope" onClick="hm.drawPart(4);"/>
<input id="drawbutton5" type="button" value="Head" onClick="hm.drawPart(5);"/><br/>
<input id="drawbutton6" type="button" value="Body" onClick="hm.drawPart(6);"/>
<input id="drawbutton7" type="button" value="Arms" onClick="hm.drawPart(7);"/>
<input id="drawbutton8" type="button" value="Legs" onClick="hm.drawPart(8);"/><br/>
<br/>
<br/>
<input id="clear" type="button" value="Clear" onClick="hm.clear();"/>
</article>
</body>
這是js代碼，它使用作爲HangmanView所有部分的陣列，所述部件自理都有drawParts函數來獲得繪製到畫布上。
HangmanView = function(canvas) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,75);
ctx.lineWidth = "5";
this.hangmanParts = new Array();
this.hangmanParts[0] = new Floor(ctx);
this.hangmanParts[1] = new VerticalBeam(ctx);
this.hangmanParts[2] = new Bridging(ctx);
this.hangmanParts[3] = new HorizontalBeam(ctx);
this.hangmanParts[4] = new Rope(ctx);
this.hangmanParts[5] = new Head(ctx);
this.hangmanParts[6] = new Body(ctx);
this.hangmanParts[7] = new Arms(ctx);
this.hangmanParts[8] = new Legs(ctx);
}
HangmanView.prototype.draw = function() {
for(var i = 0; i < this.hangmanParts.length; i++) {
this.hangmanParts[i].drawPart();
}
}
HangmanView.prototype.drawPart = function(level) {
if(0 <= level && level <= 8) {
this.hangmanParts[level].drawParts();
}
}
function Floor(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
conlineTo(180, 140);
con.stroke();
con.closePath();
}
}
function VerticalBeam(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(80, 140);
con.lineTo(80, 140);
con.stroke();
con.closePath();
}
}
function Bridging(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();
}
}
function HorizontalBeam(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();
}
}
function Rope(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();
}
}
function Head(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();;
}
}
function Body(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();
}
}
function Arms(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();
}
}
function Legs(ctx) {
var con = ctx;
this.drawParts = function() {
con.beginPath();
con.moveTo(10, 140);
con.lineTo(180, 140);
con.stroke();
con.closePath();
}
}
下面是該網站看起來像直到現在圖像： Drawing Hangman Parts
（我敢打賭，這是在我的代碼非常簡單的錯誤）
你在傳遞什麼this.hangmanParts [level] .drawParts（）; – anshuVersatile
你能提供一個小提琴嗎？ – Arg0n
@ Arg0n在這裏你去：https://jsfiddle.net/TheSevinator/o1saojfa/2/ – TheSevinator