H5使用canvas画美国队长盾牌

最新推荐文章于 2020-10-30 00:32:05 发布

想变成康大佬

最新推荐文章于 2020-10-30 00:32:05 发布

阅读量679

点赞数

本文链接：https://blog.csdn.net/qq_42137598/article/details/81023676

版权

 
   
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas width="600px" height="600px" id="mycanvas" style="background-color: #e6e8f0;"></canvas>
<script>
    var canvas=document.getElementById('mycanvas');
    var cxt=canvas.getContext('2d');

    cxt.beginPath();
    cxt.lineWidth='40';
    cxt.strokeStyle='#f13c3c';//红
    cxt.arc(300,300,200,0,Math.PI*2,false);
    cxt.stroke();

    cxt.beginPath();
    cxt.lineWidth='30';
    cxt.strokeStyle='#e6e8f0';//白
    cxt.arc(300,300,160,0,Math.PI*2,false);
    cxt.stroke();
    
    cxt.beginPath();
    cxt.lineWidth='25';
    cxt.strokeStyle='#f13c3c';//红
    cxt.arc(300,300,130,0,Math.PI*2,false);
    cxt.stroke();

    cxt.beginPath();
    cxt.fillStyle='#4465d3';//蓝
    cxt.arc(300,300,130,0,Math.PI*2,false);
    cxt.fill();
    cxt.stroke();
    
    cxt.beginPath();
    cxt.lineWidth='1';
    cxt.shadowBlur='20';
    cxt.shadowColor='#f13c3c';
    var x=300,y=300,r=130;//acebda
    cxt.moveTo(x,y-r);//A
    cxt.lineTo(r*(Math.sin(Math.PI*36/180))+x,r*(Math.cos(Math.PI*36/180))+y);//c
    cxt.lineTo(x-r*(Math.cos(Math.PI*18/180)),y-r*(Math.sin(Math.PI*18/180)));//e
    cxt.lineTo(r*(Math.cos(Math.PI*18/180))+x,y-r*(Math.sin(Math.PI*18/180)));//B
    cxt.lineTo(x-r*(Math.sin(Math.PI*36/180)),r*(Math.cos(Math.PI*36/180))+y);//d
    cxt.lineTo(x,y-r);
    cxt.stroke();
    // cxt.closePath();
    cxt.fillStyle='#e6e8f0';
    cxt.fill();
    
    

</script>
</body>
</html> 
 

难点主要在于五角星的5个顶点坐标的获取，我也是网上搜索了一些关于正五角星的角度，从而运用数学里的正弦余弦取得了相应的坐标值，顶点是A，顺时针方向依次是A,B,C,D,E，其中五角星的连接按照普通的画法即ACEDBA，然后勾勒，再填充就会得到想要的效果。效果如图，如有未完善之处，欢迎各位大佬指教一二。

想变成康大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5使用canvas画美国队长盾牌

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫