js 绘制五角星

最新推荐文章于 2024-09-09 17:26:09 发布

踏着阳光

最新推荐文章于 2024-09-09 17:26:09 发布

阅读量3.9k

点赞数 1

分类专栏： html5 js

本文链接：https://blog.csdn.net/qq_35014708/article/details/88720263

版权

js 同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

html5

18 篇文章 0 订阅

订阅专栏

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
     //设置是个顶点的坐标，根据顶点制定路径   
     for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                         -Math.sin((54+i*72)/180*Math.PI)*80+200);   
     }   
     context.closePath();   
     //设置边框样式以及填充颜色   
     context.lineWidth="3";   
     context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
     context.fill();   
    context.stroke();