如何在畫布上繪畫？

你能告訴我如何在畫布上繪畫嗎？下面是HTML 5的代碼：如何在畫布上繪畫？

var TableHeight = 300, 
    TableWidth = 500,  
function init() { 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 
    table.draw(); 
} 

table = { 
    color: '#000', 
    PositionX : 1, 
    PositionY: 1, 
    width: TableWidth, 
    height: TableHeight, 
    draw: function(){ 
     context.fillStyle = this.color; 
     context.fillRect = (this.PositionX, this.PositionY, this.width, this.height); 
     context.clearRect(5, 5, TableWidth - 10, TableHeight - 10); 
    } 
}

這裏是我的html代碼

<body> 
    <canvas id ='canvas' width = 500px height = 300px ></canvas> 
    <script>init()</script> 
</body>

對不起，我的英語水平。

來源

2012-10-05 user1724080

我認爲有一些錯誤的代碼，請在問題中指出您精確的查詢。 – Rndm

這裏的問題是，fillRect，fillStyle等都是方法，而不是屬性。你需要給他們打電話，像這樣：

context.fillStyle(this.color);

參見上MDN文檔的詳細信息和樣品

你也應該看看Douglas Crockford's網站上的JavaScript良好作風指針。例如，您在某些地方省略了var關鍵字，導致變量無意中成爲全局變量。

來源

2012-10-05 21:14:30 Jay

有許多東西你的代碼錯誤。

首先：你的函數聲明，就我所看到的，是錯誤的。它不會被定義爲在最後一個全局變量之後，而是使用逗號而不是分號。以下是如何正確地定義你的功能，因爲你沒有通過一個變量這樣做：

var TableHeight = 300, 
    TableWidth = 500; 

function init() { 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 
    table.draw(); 
}

最後，雖然.fillStyle是一個屬性，而不是方法，同樣不是.fillRect() true，這確實是一個方法，需要這樣被執行：

var table = { 
    color: '#000', 
    PositionX: 1, 
    PositionY: 1, 
    width: TableWidth, 
    height: TableHeight, 
    draw: function() { 
     context.fillStyle = this.color; 
     context.fillRect(this.PositionX, this.PositionY, this.width, this.height); 
     context.clearRect(5, 5, TableWidth - 10, TableHeight - 10); 
    } 
}

DEMO

來源

2012-10-05 21:18:58 Daedalus

非常感謝，它的作品！ – user1724080

@ user1724080如果這解決了您的問題，請通過單擊向下箭頭下方的勾號來接受它。 – Daedalus

如何在畫布上繪畫？

回答

相關問題