首页 > 代码库 > html5 canvas画五角星（美国队长）
html5 canvas画五角星（美国队长）
画一波五角星： 美国队长图标
原理： （1）根据五角星的顶点，外顶点5个，内顶点5个，分成内外圆
（2）由三角函数可表示出每个顶点的位置
（3）利用canvas的lineTo()接口画图
上代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Captain America</title> 7 <style type="text/css"> 8 #canvas { 9 display: block; 10 margin: 50px auto; 11 } 12 </style> 13 </head> 14 15 <body> 16 <canvas id="canvas"></canvas> 17 <script> 18 window.onload = function() { 19 var canvas = document.getElementById("canvas"); 20 canvas.width = 800; 21 canvas.height = 600; 22 23 var context = canvas.getContext("2d"); 24 // 四个圆 25 drawArc(context, 300, 300, 120, 0, Math.PI * 2, false, "#dd5870"); 26 drawArc(context, 300, 300, 100, 0, Math.PI * 2, false, "#e0dedf"); 27 drawArc(context, 300, 300, 80, 0, Math.PI * 2, false, "#dd5870"); 28 drawArc(context, 300, 300, 60, 0, Math.PI * 2, false, "#2773d3"); 29 drawStar(context, 20, 60, 300, 300, 0, "#dedce1"); // 五角星 30 } 31 32 function drawStar(ctx, r, R, x, y, changeDeg, fillColor) { 33 //绘制星星的路径,changeDeg：表示五角星旋转的角度 34 ctx.beginPath(); //开始路径 35 for (var i = 0; i < 5; i++) { 36 ctx.lineTo(Math.cos((18 + i * 72 - changeDeg) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - changeDeg) / 180 * Math.PI) * R + y); 37 ctx.lineTo(Math.cos((54 + i * 72 - changeDeg) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - changeDeg) / 180 * Math.PI) * r + y); 38 } 39 ctx.closePath() //结束路径 40 ctx.fillStyle = fillColor; 41 ctx.fill(); 42 } 43 44 function drawArc(ctx, x, y, r, stratAngel, endAngel, flag, fillColor) { 45 ctx.beginPath(); 46 ctx.arc(x, y, r, stratAngel, endAngel, flag); 47 ctx.fillStyle = fillColor; 48 ctx.fill(); 49 ctx.closePath(); 50 } 51 </script> 52 </body> 53 </html>
结果：
html5 canvas画五角星（美国队长）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。