[英]HTML5 canvas: Mutliple arc shapes with for loop
Hi there my problem with the code below is the the arc is creating 1 shape not the ten specified in the for loop... 嗨,我在下面的代码中遇到的问题是圆弧正在创建1个形状,而不是for循环中指定的十个形状...
If I was to change from arc to $cd.fillRect(10,20,$x,$y);
如果我要从arc更改为
$cd.fillRect(10,20,$x,$y);
then that would create 10 different rectangles but not the arc... what am I misunderstanding here? 那会创建10个不同的矩形,但不是圆弧...我在这里误解了什么?
var $canvas = $('#canvas-one')[0],
$cd;
if ($canvas.getContext) {
$cd = $canvas.getContext('2d');
for (i = 0; i <= 10; i++) {
$cd.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
$cd.strokeStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
var $x = 300 + Math.floor(Math.random() * 101);
var $y = 300 + Math.floor(Math.random() * 101);
var $radius = 0.1 + Math.floor(Math.random() * 6);
$cd.beginPath();
$cd.arc($x, $y, $radius, 0, Math.PI * 2, true);
}
$cd.stroke();
$cd.fill();
//$canvas.width = $canvas.height;
}
笔触和填充应该在循环中
I think you forgot to multiply x
with i
. 我认为您忘了将
x
与i
相乘。
for (let i = 0; i < 10; i++) {
context.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
context.beginPath();
context.arc(i * x, y,15, 0, 2 * Math.PI,true);
context.fill();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.