Question

我尝试在HTML5上使用画布和JS绘制对象。为此，我有以下两个文件index.html：

    <html>
<body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="script.js">
     </script>  
</body>
</html>

据我了解，我在这里script.js的意思是：

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 500;
myCanvas.height = 500;

var ctx = myCanvas.getContext("2d");


function drawLine(ctx, startX, startY, endX, endY){
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();
}

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle){
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.stroke();
}
function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(centerX,centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
}

this.drawLine(_ctx,100,100,200,200);
this.drawArc(_ctx, 150,150,150, 0, Math.PI/3);
this.drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000');

打开index.html，看不到直线或圆弧，所以我的问题是这里缺少什么？

提前谢谢！

Answer 1

函数调用中有_ctx，但您将其定义为ctx。

Answer 2

仅出于完整性考虑，您在此处有三个选项（从最佳到最坏imo列出）：

使用var _ctx = myCanvas.getContext("2d");
这将修复您拥有的代码，并且您的函数可在其他上下文中重用
从声明行和调用中删除ctx / _ctx参数
这样，函数将使用现有的全局变量
将_ctx更改为ctx的建议解决方案
这样可以修复代码，但掩盖了本地ctx在全局变量上的影子，并且这里不需要将上下文传递到函数中。根据我个人的观点，这是最不易读的选项和不良做法

还有第四个选项，我更喜欢，但它涉及JavaScript的prototype。声明这样的功能：

CanvasRenderingContext2D.prototype.drawLine = function (startX, startY, endX, endY) {
  this.beginPath();
  this.moveTo(startX, startY);
  this.lineTo(endX, endY);
  this.stroke();
}

您现在已将自己的自定义函数添加到浏览器的API，使其可用于所有CanvasRenderingContext2D对象。您可以这样称呼它：

ctx.drawLine(100, 100, 200, 200);

Answer 3

只需将_ctx更改为ctx

this.drawLine(ctx,100,100,200,200);
this.drawArc(ctx, 150,150,150, 0, Math.PI/3);
this.drawPieSlice(ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000');

并始终检查控制台选项卡，因为当我在浏览器中尝试您的代码时遇到此错误Uncaught ReferenceError: _ctx is not defined，因此我将_ctx更改为ctx

JS和HTML5入门

3 个答案: