Question

你能告诉我如何在画布上画画吗？这是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>

抱歉我的英文。

Answer 1

您的代码存在多处问题。

首先：据我所知，你的功能声明是错误的。它没有被定义为在你的最后一个全局变量之后，你输入一个逗号，而不是一个分号。以下是如何正确定义您的功能，因为您不是通过变量来实现的：

var TableHeight = 300,
    TableWidth = 500;

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

最后，虽然.fillStyle是一个属性，而不是一个方法，但.fillRect()的情况却是如此，这确实是一种方法，需要按原样执行：

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

Answer 2

这里的问题是fillRect，fillStyle等是方法，而不是属性。你需要这样称呼它们：

context.fillStyle(this.color);

请参阅MDN上的文档以获取更多信息和样本

您还应该查看Douglas Crockford's网站，了解有关良好Javascript风格的建议。例如，您在某些地方省略了var关键字，这会导致变量无意中成为全局变量。

如何在画布上画画？

2 个答案: