è¿ä¸ªéè¦ç¨å°H5æ°æ ç¾ï¼canvasç»å¶å¾å½¢ï¼å©ç¨jsæ¥å®ç°æ½å¥ææï¼å®ç°æ¥éª¤å¦ä¸ï¼
ããvar num = 6; // å¥åæ°é var canvas = document.getElementById('canvas'); var
btn = document.getElementById('btn'); if(!canvas.getContext){
alert('æ±æï¼æµè§å¨ä¸æ¯æã'); return; } // è·åç»å¾ä¸ä¸æ var ctx = canvas.getContext('2d'); for
(var i = 1; i <= num; i++) { // ä¿åå½åç¶æ ctx.save(); // å¼å§ä¸æ¡æ°è·¯å¾
ctx.beginPath(); // ä½ç§»å°åå¿ï¼ä¸é¢éè¦å´ç»åå¿æ转 ctx.translate(150, 150); // ä»(0,
0)åæ å¼å§å®ä¹ä¸æ¡æ°çåè·¯å¾ ctx.moveTo(0, 0); // æ转弧度,éå°è§åº¦è½¬æ¢ä¸ºå¼§åº¦,ä½¿ç¨ degrees * Math.PI/180
å
¬å¼è¿è¡è®¡ç®ã ctx.rotate(360 / num * i * Math.PI/180); // ç»å¶å弧 ctx.arc(0, 0, 150, 0, 2
* Math.PI / num, false); if (i % 2 == 0) { ctx.fillStyle = '#ffb820'; }else{
ctx.fillStyle = '#ffcb3f'; } // å¡«å
æå½¢ ctx.fill(); // ç»å¶è¾¹æ¡ ctx.lineWidth = 0.5;
ctx.strokeStyle = '#f48d24'; ctx.stroke(); // æ¢å¤åä¸ä¸ªç¶æ ctx.restore(); }
温馨提示:答案为网友推荐,仅供参考