代码之家 › 专栏 › 技术社区 › Engine

JS和HTML5入门

javascript

Engine · 技术社区 · 7 年前

我尝试在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');

索引.html 我看不到一条线或一条弧,所以我的问题是我在这里遗漏了什么?

提前谢谢!

3 回复 | 直到 7 年前

jmargolisvt 7 年前

你有 _ctx ctx .

ChrisG 7 年前

为了完整起见,这里有三个选项(从最佳到最差列出):

使用 var _ctx = myCanvas.getContext("2d");
这将修复您的代码,并且您的函数可用于其他上下文
拆下 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);

Mina Ragaie 7 年前

只要改变 _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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前