【Canvas技法】绘制正六边形、正八边形、六角星、立体六角星

【图例】

【代码】

复制代码
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>绘制正六边形、正八边形、六角星、立体六角星</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body οnlοad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.
            </canvas>
            <img id="myImg" src="125.png" style="display:none;"/>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
const HEIGHT=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  
    canvas.width=WIDTH;
    canvas.height=HEIGHT;

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央

    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){

    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){
        
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    
        
        // 绘制正六边形
        drawPolygon(ctx,6,-128,-128,100);
        ctx.fillStyle="RGB(215,204,182)";
        ctx.fill();
        ctx.lineWidth=2;
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.stroke();

        // 绘制正八边形
        drawPolygon(ctx,8,128,-128,100);
        ctx.fillStyle="RGB(215,204,182)";
        ctx.fill();
        ctx.lineWidth=2;
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.stroke();
    
        // 绘制六角星
        ctx.beginPath();
        var arr=create6StarArray(-128,128,100);
        for(var i=0;i<arr.length;i++){
            ctx.lineTo(arr[i].x,arr[i].y);
        }
        ctx.closePath();
        ctx.fillStyle="RGB(215,204,182)";
        ctx.fill();
        ctx.lineWidth=2;
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.stroke();

        // 带明暗效果的立体六角星
        var arr=create6StarArray(128,128,100);
        for(var i=0;i<arr.length;i++){
            var pt=arr[i];
            var nextPt=arr[(i+1) % arr.length];

            ctx.beginPath();
            ctx.lineTo(128,128);
            ctx.lineTo(pt.x,pt.y);
            ctx.lineTo(nextPt.x,nextPt.y);
            ctx.closePath();
            ctx.fillStyle=(i%2==0)?"red":"orange";
            ctx.fill();
            ctx.lineWidth=0.5;
            ctx.strokeStyle="yellow";
            ctx.stroke();
        }
        

        // 版权
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "8px consolas";
        ctx.fillStyle="black";
        ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);
    }

    // 画前景
    this.paintFg=function(ctx){
        
        
    }
}

/*----------------------------------------------------------
函数:绘制正多边形
n:正多边形的边数
x:正多边形中心的横坐标
y:正多边形中心的纵坐标
r:正多边形中心到顶点的距离
----------------------------------------------------------*/
function drawPolygon(ctx,n,x,y,r){
    var polyArr=[];
    for(var i=0;i<n;i++){
        var theta=Math.PI*2/n*i;
        var pt={};
        pt.x=r*Math.cos(theta)+x;
        pt.y=r*Math.sin(theta)+y;
        polyArr.push(pt);
    }

    ctx.beginPath();
    for(let i=0;i<polyArr.length;i++){
        ctx.lineTo(polyArr[i].x,polyArr[i].y);
    }
    ctx.closePath();
}

//-----------------------------------
// 函数:得到大卫六角星的顶点数组
// x:横坐标
// y:纵坐标
// radius:大卫星的顶点半径
//-----------------------------------
function create6StarArray(x,y,radius){
    var arr=[];

    var innerRadius=radius/1.732;
    for(var i=0;i<=12;i++){
        var theta=i*Math.PI/6+Math.PI/6;
        var point={};

        if(i%2==0){
            point.x=radius*Math.cos(theta);
            point.y=radius*Math.sin(theta);
        }else{
            point.x=innerRadius*Math.cos(theta);
            point.y=innerRadius*Math.sin(theta);
        }

        point.x+=x;
        point.y+=y;

        arr.push(point);
    }

    return arr;
}

/*--------------------------------------------------
在国企和事业单位,
你会整天顾忌领导的喜好和意见,
必须妥协自己的人格和原则,
迎合那些能够决定你人生前途和命运的人。
对我来说,这是无法忍受的。
---------------------------------------------------*/
//-->
</script>

END

相关推荐
涔溪10 小时前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang15 小时前
前端如何实现电子签名
前端·javascript·html5
veminhe20 小时前
html怎么设置html5
html·html5
失落的多巴胺1 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
veminhe11 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说12 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
veminhe13 天前
HTML5简介
前端·html·html5
蹦极的考拉16 天前
在使用 HTML5 的 <video> 标签嵌入视频时,有时会遇到无法播放 MP4 文件的问题
前端·音视频·html5
木木黄木木16 天前
HTML5 火焰字体效果教程
前端·html·html5
于本淡17 天前
一篇文章快速学会HTML
开发语言·前端·数据结构·qt·html·json·html5