如何在画布上绘画？

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

如何在画布上绘画？

回答

相关问题