0

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

对不起我的英语不好。

4

2 回答 2

2

您的代码有很多问题。

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

var TableHeight = 300,
    TableWidth = 500;

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

最后，while.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);
    }
}

演示

于 2012-10-05T21:18:58.053 回答
0

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

context.fillStyle(this.color);

有关更多信息和示例，请参阅MDN上的文档

您还应该查看Douglas Crockford 的网站以获取有关良好 Javascript 样式的指针。例如，您var在某些地方省略了关键字，这会导致变量无意中成为全局变量。

于 2012-10-05T21:14:30.780 回答