                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

為什么我的星星都在一坨？

<!DOCTYPE html>

<head>

? ? <meta charset="UTF-8">

? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>Document</title>

</head>

<body>

? ? <canvas id="star" ></canvas>

? ? <script>

? ? ? ? window.onload = function () {

? ? ? ? ? ? let canvas = document.getElementById('star');

? ? ? ? ? ? canvas.width = 800;

? ? ? ? ? ? canvas.height = 800;

? ? ? ? ? ? let context = canvas.getContext('2d');

? ? ? ? ? ? context.fillStyle = 'black';

? ? ? ? ? ? context.fillRect( 0,0,canvas.width,canvas.height);

? ? ? ? ? ? // frawStar(context,150,300,400,400,30);//調(diào)用五角星函數(shù)

? ? ? ? ? ? for(var i = 0; i < 20; i ++){

? ? ? ? ? ? ? ? var r = Math.random() * 10 + 10;

? ? ? ? ? ? ? ? var x = Math.random() * canvas.width/10;

? ? ? ? ? ? ? ? var y = Math.random() * canvas.height/10;

? ? ? ? ? ? ? ? var a = Math.random() * 360;

? ? ? ? ? ? ? ? console.log(r,x,y,a)

? ? ? ? ? ? ? ? frawStar(context , x , y , r , (r / 2.0) , a);//調(diào)用五角星函數(shù)

? ? ? ? ? ? }

? ? ? ? ? ? // context.lineWidth = 10;

? ? ? ? ? ? context.stroke();

? ? ? ? }

? ? ? ? //五角星的函數(shù)

? ? ? ? /* r 小圓半徑，R大圓半徑，x 偏移值x坐標(biāo)，y 偏移值 y坐標(biāo)，rot五角星旋轉(zhuǎn)角度*/

? ? ? ? function frawStar(cxt, r, R, x, y, rot) {

? ? ? ? ? ? cxt.beginPath();

? ? ? ? ? ? for (var i = 0; i < 5; i++) {

? ? ? ? ? ? ? ? cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,

? ? ? ? ? ? ? ? ? ? -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y);

? ? ? ? ? ? ? ? cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,

? ? ? ? ? ? ? ? ? ? -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);

? ? ? ? ? ? }

? ? ? ? ? ? cxt.closePath();

? ? ? ? ? ? cxt.fillStyle = '#fb3';

? ? ? ? ? ? // ?cxt.fillStyle = '#fff';

? ? ? ? ? ? cxt.strokeStyle = '##fd5';

? ? ? ? ? ? cxt.lineWidth = 3;

? ? ? ? ? ? cxt.lineJoin = 'round';

? ? ? ? ? ? cxt.fill();

? ? ? ? ? ? cxt.stroke();

? ? ? ? }

? ? </script>

</body>

</html>

weixin_慕工程9554846

2023-03-07

源自：Canvas繪圖詳解 4-1

關(guān)注問題我要回答

1646

操作

收起

1 回答

slongzhang
2023-05-07

?for(var?i?=?0;?i?<?20;?i?++){
????var?r?=?Math.random()?*?10?+?10;
????var?x?=?Math.random()?*?canvas.width/10;?//?偏移量寫成了10分之一
????var?y?=?Math.random()?*?canvas.height/10;?//?偏移量寫成了10分之一
????var?a?=?Math.random()?*?360;
????console.log(r,x,y,a)
????frawStar(context?,?x?,?y?,?r?,?(r?/?2.0)?,?a);?//?參數(shù)位置寫錯了
????//?應(yīng)該是frawStar(context?，內(nèi)圓半徑,?大圓半徑,?偏移x?,?偏移y?,?旋轉(zhuǎn)角度a);
}

改成如下即可

for(var?i?=?0;?i?<?20;?i?++){
????var?r?=?Math.random()?*?10?+?10;
????var?x?=?Math.random()?*?canvas.width;
????var?y?=?Math.random()?*?canvas.height;
????var?a?=?Math.random()?*?360;
????console.log(r,x,y,a)
????frawStar(context?,?(r?/?2.0),?r,?x?,?y??,?a);//調(diào)用五角星函數(shù)
}