【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

相关推荐
huangql52021 小时前
截图功能技术详解:从原理到实现的完整指南
前端·html5
java水泥工2 天前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
月光技术杂谈2 天前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
.生产的驴3 天前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
ZTLJQ4 天前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
Hello123网站4 天前
300多个Html5小游戏列表和下载地址
前端·html·html5
rising start5 天前
前端基础一、HTML5
前端·html·html5
tryCbest6 天前
Html5实现弹出表单
html5
xhload3d6 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
繁花与尘埃7 天前
HTML5简介与基本骨架(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
笔记·学习·html5