canvasでfill()が効かない

drawhexagon_2という関数において、fill()が機能しません。

JavaScript
1
2(function(){
3
4    let canvas = document.getElementById("myCanvas_2");
5    let context = canvas.getContext("2d");
6    
7    //context.fillRect(0,0,10,10);
8    
9    /*
10    let X = 100;
11    let Y = 100;
12    let r = 50;
13    */
14    
15    function drawhexagon(X,Y,r,j,k){
16        context.save();
17        context.beginPath();
18        for(i=0; i<6; i++){
19            context.moveTo(X+r*Math.cos(Math.PI*2*i/6),Y+r*Math.sin(Math.PI*2*i/6));
20            context.lineTo(X+r*Math.cos(Math.PI*2*(i+1)/6),Y+r*Math.sin(Math.PI*2*(i+1)/6));
21        }
22        context.strokeStyle = `rgb(${25.5*j},${25.5*k},0)`
23        context.lineWidth = 1;
24        context.closePath();
25        context.stroke();
26        context.restore();
27    }
28    
29    /*
30    drawhexagon(200,200,10);
31    drawhexagon(400,200,10);
32    */
33    
34    let array = [];
35    for(i=0; i<10; i++){
36        array[i] = [];
37    }
38    
39    for(i=0; i<10; i++){
40        for(j=0; j<10; j++){
41            array[i][j] = [i,j];
42        }
43    }
44    
45    
46    console.log(array[0][0][0]);
47    console.log(array[1][0][0]);
48    
49    
50    
51    for(j=0; j<10; j++){
52        for(k=0; k<10; k++){
53            drawhexagon(100+20*j+20*k*Math.cos(Math.PI*4/3),200+20*k*Math.sin(Math.PI*4/3),10,j,k);
54        }
55    }
56    
57    function drawhexagon_2(X,Y,r,j,k){
58        context.save();
59        context.fillStyle = `rgb(${25.5*j},${25.5*k},0)`
60        context.beginPath();
61        for(i=0; i<6; i++){
62            context.moveTo(X+r*Math.cos(Math.PI*2*i/6),Y+r*Math.sin(Math.PI*2*i/6));
63            context.lineTo(X+r*Math.cos(Math.PI*2*(i+1)/6),Y+r*Math.sin(Math.PI*2*(i+1)/6));
64        }
65        context.closePath();
66        context.fill();
67        context.stroke();
68        context.restore();
69    }
70
71    
72
73    for(j=0; j<10; j++){
74        for(k=0; k<10; k++){
75            drawhexagon_2(300+40*k*Math.cos(Math.PI/3),400+20*j-40*k*Math.sin(Math.PI/3),10,j,k);
76        }
77    }
78
79    //drawhexagon_2(300,300,10,10,10);
80
81    context.beginPath();
82    context.moveTo(100,100);
83    context.lineTo(150,100);
84    context.lineTo(150,200);
85    context.fill();
86
87
88    /*
89    let X = 100;
90    let Y = 100;
91    let r = 100;
92    context.save();
93    context.beginPath();
94    for(i=0; i<6; i++){
95        context.moveTo(X+r*Math.cos(Math.PI*2*i/6),Y+r*Math.sin(Math.PI*2*i/6));
96        context.lineTo(X+r*Math.cos(Math.PI*2*(i+1)/6),Y+r*Math.sin(Math.PI*2*(i+1)/6));
97    }
98    context.strokeStyle = `rgb(${25.5*j},${25.5*k},0)`
99    context.lineWidth = 1;
100    context.closePath();
101    context.fill();
102    context.restore();
103    */
104
105    }());
106    
107

わかる方お願いします。

※追記
色々調べてみたところ、fillStyleの指定にrgbを用いる場合、Math.floor()で整数値化したソースコードが目立ったため、自分のコードを見直した時、小数点を含む数値を用いていることが問題になっているのかも、と思いました。
ただし、stroke()は問題なく機能しているので…。

行動規範の内容に同意します

回答1件

ベストアンサー

moveToを挟んでいるので閉じた領域が存在しません
moveToを削除し閉じた領域を定義する必要があります

javascript
1        for(i=0; i<6; i++){
2            //context.moveTo(X+r*Math.cos(Math.PI*2*i/6),Y+r*Math.sin(Math.PI*2*i/6));
3            context.lineTo(X+r*Math.cos(Math.PI*2*(i+1)/6),Y+r*Math.sin(Math.PI*2*(i+1)/6));
4        }

尚、moveToをlineToに変更し下のlineTo削除でもいいです

javascript
1        for(i=0; i<6; i++){
2            context.lineTo(X+r*Math.cos(Math.PI*2*i/6),Y+r*Math.sin(Math.PI*2*i/6));
3            //context.lineTo(X+r*Math.cos(Math.PI*2*(i+1)/6),Y+r*Math.sin(Math.PI*2*(i+1)/6));
4        }