如果文本不是 html5 canvas 中的 output 怎么辦？

Question

<script>
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

    function numText(num,x,y) 
    {
    this.num = num,
    this.x = x,
    this.y = y;
    }

    numText.prototype.writeText = function()
    {
    context.font ='60px Bahnschrift SemiCondensed';
    context.fillStyle = 'red';
    context.fillText(numText.text,numText.x,numText.y);
    }

    var text1 = new numText("30",100,225);
    text1.writeText();
</script>

我想使用面向對象編程的概念打印出“30”。 文字不打印怎么辦？

Answer 1

你需要糾正兩件事：

• 在writeText numText中用this替換對 numText 的引用。
  當您調用 function 時，您可以在特定實例的上下文中執行此操作，並使用this關鍵字引用其屬性
• 調用context.fillText時，您使用的是屬性text而不是num作為第一個參數

更正的代碼：

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

function numText(num, x, y) {
    this.num = num,
        this.x = x,
        this.y = y;
}

numText.prototype.writeText = function () {
    context.font = '60px Bahnschrift SemiCondensed';
    context.fillStyle = 'red';
    context.fillText(this.num, this.x, this.y);
}

var text1 = new numText("30", 100, 225);
text1.writeText();