我的drawLine() javascript函数出了什么问题？
我的drawLine() javascript函数出了什么问题？
提问于 2018-06-12 07:11:18
我正在尝试制作一个tic-tac-toe游戏，而且我还是个javascript新手。我确实设法在没有函数的情况下制作了电路板，但我想让它更有效率，所以我试着使用函数。有什么帮助吗？谢谢。
function drawLine(fromX, fromY, toX, toY){ // draws a line inside the canvas from first 2 spots to second 2.
this.context.moveTo(fromX, fromY);
this.context.lineTo(toX, toY);
this.context.stroke();
}
this.drawLine(100, 0, 100, 300);
this.drawLine(200, 0, 200, 300);
this.drawLine(0, 100, 300, 100);
this.drawLine(0, 200, 300, 200);回答 1
Stack Overflow用户
发布于 2018-06-12 07:25:08
我不太清楚你为什么会有这么多这个，但我已经帮你修好了。
var gameBoard = {
start : function(){
var canvas = document.createElement("canvas")
document.body.insertBefore(canvas, document.body.childNodes[0]);
const c = document.querySelector('canvas');
const ctx = c.getContext('2d');
c.width = 300;
c.height = 300;
function drawLine(fromX, fromY, toX, toY){ // draws a line inside the canvas from first 2 spots to second 2.
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
ctx.stroke();
}
drawLine(100, 0, 100, 300);
drawLine(200, 0, 200, 300);
drawLine(0, 100, 300, 100);
drawLine(0, 200, 300, 200);
/*
this.context.moveTo(100, 0);
this.context.lineTo(100,300); // draw line 1
this.context.stroke();
this.context.moveTo(200, 0);
this.context.lineTo(200,300); // draw line 2
this.context.stroke();
this.context.moveTo(0, 100);
this.context.lineTo(300,100); // draw line 3
this.context.stroke();
this.context.moveTo(0, 200);
this.context.lineTo(300,200); // draw line 1
this.context.stroke();
*/
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50807247
复制相关文章
相似问题