Getting started with JS and HTML5
Question
I'm try to draw objects using canvas and JS on HTML5. for that I've 2 file index.html with the follwing :
<html>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
As far as I understood I'm callign here the script.js with the following :
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');
Opening the index.html I can't see a line or an arc, so my question is what I'm missing here ?
thanks in advance !
3 answers
solution1
1 ACCPTED 2018-10-09 17:28:45
您在函数调用中包含_ctx ，但将其定义为ctx 。
solution2
1 2018-10-09 17:49:21
Just for the sake of completeness, you have three options here (listed from what is best to worst imo):
use
var _ctx = myCanvas.getContext("2d");
This will fix the code you have, and your functions are reusable for other contextsremove the
ctx/_ctxparameter from your declaration lines and calls
That way the functions use the existing global variableThe suggested solution of changing
_ctxtoctx
This fixes the code but glosses over the fact that your localctxis shadowing the global one, and that passing the context into the function is unnecessary here; it's the least readable option and bad practice in my personal opinion
There's also a fourth option, one I prefer, but it touches on JavaScript's prototype . Declare the function like this:
CanvasRenderingContext2D.prototype.drawLine = function (startX, startY, endX, endY) {
this.beginPath();
this.moveTo(startX, startY);
this.lineTo(endX, endY);
this.stroke();
}
You have now added your own custom function to the browser's API, making it available for all CanvasRenderingContext2D objects. You can call it like this:
ctx.drawLine(100, 100, 200, 200);
solution3
0 2018-10-09 17:25:31
just change _ctx to be 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');
and always check the console tab, because when i tried ur code in the browser got this error Uncaught ReferenceError: _ctx is not defined so i changed _ctx to ctx
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.