用画布绘制圆 [英] Drawing circles with canvas
本文介绍了用画布绘制圆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我尝试绘制此图形时，我们没有看到任何实心圆圈。
var ball =（function（） {
function ball（x，y）{
this.color = white;
this.x = x;
this.y = y;
this .radius = Math.round（Math.random（）* ball.MAX_RADIUS）;
}
ball.MAX_RADIUS = 5;
ball.prototype.draw = function（context）{
context.fillStyle = #ffffff;
context.arc（this.x，this.y，this.radius，0，2 * Math.PI，false）;
};
ball.prototype.update = function（）{
};
返回球；
}）（）;
解决方案
您接近了！
在绘制之前，您总是必须先执行 context.beginPath（），然后实际执行 context.fill（）。 p>
顺便说一句，您的圆圈填充颜色是白色，因此您无法在纯白色背景下看到它。我只是为了下面的测试将填充颜色更改为红色...
这里是代码：
<！doctype html>
< html>
< head>
< link rel = stylesheet type = text / css media = all href = css / reset.css /> <！-重置CSS->
< script type = text / javascript src = http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; }
canvas {border：1px纯红色；}
< / style>
< script>
$（function（）{
var canvas = document.getElementById（ canvas）;
var ctx = canvas.getContext（ 2d）;
var ball =（function（）{
function ball（x，y）{
this.color = white;
this.x = x;
this.y = y;
this.radius = Math.round（Math.random（）* ball.MAX_RADIUS）;
}
ball.MAX_RADIUS = 5;
ball。 prototype.draw =函数（上下文）{
context.fillStyle = red;
context.beginPath（）;
context.arc（this.x，this.y，this.radius ，0，2 * Math.PI，false）;
context.fill（）;
};
ball.prototype.update = function（）{
};
return ball;
}）（）;
var myNewBall =新球（100,100）;
myNewBall .draw（ctx）;
}）； //结尾$（function（）{}）;
< / script>
< / head>
< body>
< canvas id = canvas width = 300 height = 300>< / canvas>
< / body>
< / html>
when I try draw this I do not see any solid circles our outlines..
var ball = (function () {
function ball(x, y) {
this.color = "white";
this.x = x;
this.y = y;
this.radius = Math.round(Math.random() * ball.MAX_RADIUS);
}
ball.MAX_RADIUS = 5;
ball.prototype.draw = function (context) {
context.fillStyle = "#ffffff";
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
};
ball.prototype.update = function () {
};
return ball;
})();
解决方案
You were close!
You always have to do context.beginPath() before drawing and context.fill() to actually do the fill-draw.
BTW, your circle fill color is white, so you wouldn't be able to see it against a solid white background. I changed your fill color to red just for the test below...
Here is code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var ball = (function () {
function ball(x, y) {
this.color = "white";
this.x = x;
this.y = y;
this.radius = Math.round(Math.random() * ball.MAX_RADIUS);
}
ball.MAX_RADIUS = 5;
ball.prototype.draw = function (context) {
context.fillStyle = "red";
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
context.fill();
};
ball.prototype.update = function () {
};
return ball;
})();
var myNewBall=new ball(100,100);
myNewBall.draw(ctx);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于用画布绘制圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
