【Canvas与旗帜】标准英国米字旗

普兰店拉马努金2025-04-20 20:58

【成图】

【代码】

复制代码 
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>重绘英国米字旗 Draft2</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>
        </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){
        //sleep(100);
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    // 初始化
    this.init=function(){
        
    }

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

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    
    }

    // 画前景
    this.paintFg=function(ctx){
        // 底色
        ctx.save();
        ctx.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();
        
        const R=210;//基准尺寸

        // 第一圈
        ctx.save();
        var r=R*1.00;
        var w=2*r;// 高宽要符合一比二的比例
        var h=r;
        drawEnglishFlg(ctx,0,0,w,h,"rgb(204,0,1)","rgb(1,0,102)","white");
        ctx.restore();
                
        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}

/*----------------------------------------------------------
函数:用于绘制英国米字旗
ctx:绘图上下文
x:旗中心横坐标
y:旗中心纵坐标
width:旗宽
height:旗高
redColor:红色颜色
blueColor:蓝色颜色
whiteColor:白色颜色
----------------------------------------------------------*/
function drawEnglishFlg(ctx,x,y,width,height,redColor,blueColor,whiteColor){
    // 先铺背景色
    ctx.save();
    ctx.fillStyle=whiteColor;
    drawRect(ctx,x,y,width,height);
    ctx.fill();
    ctx.restore();

    const WD=width/60;// 宽度分为六十份
    const HD=height/30;// 高度分为三十份

    // 绘制中心十字之横线
    ctx.save();
    ctx.fillStyle=redColor;
    drawRect(ctx,x,y,60*WD,6*HD);
    ctx.fill();
    ctx.restore();

    // 绘制中心十字之竖线
    ctx.save();
    ctx.fillStyle=redColor;
    drawRect(ctx,x,y,6*WD,30*HD);
    ctx.fill();
    ctx.restore();

    // 求左右四小三角块之参数
    var theta=Math.atan(height/width);
    var triHeight=10*HD-3*HD/Math.cos(theta);
    var triWidth=triHeight/Math.tan(theta);

    // 右上三角块
    var c=createPt(30*WD,-5*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 右下三角块
    var c=createPt(30*WD,5*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 左上三角块
    var c=createPt(-30*WD,-5*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 左下三角块
    var c=createPt(-30*WD,5*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 求上下四大三角块之参数
    var theta=Math.atan(height/width);
    var triWidth=25*HD-3*HD/Math.sin(theta);
    var triHeight=triWidth*Math.tan(theta);

    // 上右三角块
    var c=createPt(5*WD,-15*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 上左三角块
    var c=createPt(-5*WD,-15*HD);
    var b=createPt(c.x,c.y+triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 下右三角块
    var c=createPt(5*WD,15*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x+triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 下左三角块
    var c=createPt(-5*WD,15*HD);
    var b=createPt(c.x,c.y-triHeight);
    var a=createPt(c.x-triWidth,c.y);
    drawTriangle(ctx,c,b,a,blueColor);

    // 绘制右上条带
    var theta=Math.atan(height/width);
    var a=createPt(30*WD,-15*HD);
    var b=createPt(a.x-10*HD/Math.tan(theta),a.y+10*HD);
    var c=createPt(b.x-2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x-2*HD/Math.sin(theta),a.y);
    drawBelt(ctx,a,b,c,d,redColor);

    // 绘制左下条带
    var theta=Math.atan(height/width);
    var a=createPt(-30*WD,15*HD);
    var b=createPt(a.x+10*HD/Math.tan(theta),a.y-10*HD);
    var c=createPt(b.x+2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x+2*HD/Math.sin(theta),a.y);
    drawBelt(ctx,a,b,c,d,redColor);

    // 绘制左上条带
    var theta=Math.atan(height/width);
    var a=createPt(-30*WD,-15*HD);
    var b=createPt(a.x+10*HD/Math.tan(theta),a.y+10*HD);
    var c=createPt(b.x-2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x,a.y+2*HD/Math.cos(theta));
    drawBelt(ctx,a,b,c,d,redColor);

    // 绘制左下条带
    var theta=Math.atan(height/width);
    var a=createPt(30*WD,15*HD);
    var b=createPt(a.x-10*HD/Math.tan(theta),a.y-10*HD);
    var c=createPt(b.x+2*HD/Math.sin(theta),b.y);
    var d=createPt(a.x,a.y-2*HD/Math.cos(theta));
    drawBelt(ctx,a,b,c,d,redColor);
}

// 绘制四边形带子
function drawBelt(ctx,a,b,c,d,fillStyle){
    ctx.save();
    ctx.fillStyle=fillStyle;
    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.lineTo(c.x,c.y);
    ctx.lineTo(d.x,d.y);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// 绘制三角线块
function drawTriangle(ctx,c,b,a,fillStyle){
    ctx.save();
    ctx.fillStyle=fillStyle;
    ctx.beginPath();
    ctx.moveTo(c.x,c.y);
    ctx.lineTo(b.x,b.y);
    ctx.lineTo(a.x,a.y);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

/*----------------------------------------------------------
函数:用于绘制矩形
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
width:矩形宽
height:矩形高
----------------------------------------------------------*/
function drawRect(ctx,x,y,width,height){
    ctx.beginPath();
    ctx.moveTo(x-width/2,y-height/2);
    ctx.lineTo(x+width/2,y-height/2);
    ctx.lineTo(x+width/2,y+height/2);
    ctx.lineTo(x-width/2,y+height/2);
    ctx.closePath();
}

/*----------------------------------------------------------
函数:用于绘制实心圆
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
style:填充圆的方案
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,style){
    ctx.fillStyle=style;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
    var retval={};
    retval.x=x;
    retval.y=y;
    return retval;
}

/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {
    const date = Date.now();
    let currDate = null;
    while (currDate - date < milliSeconds) {
        currDate = Date.now();
    } 
}

/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){
    ctx.save();
    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.font = font;
    ctx.fillStyle=color;
    ctx.fillText(text,x,y);
    ctx.restore();
}

/*-------------------------------------------------------------
少年应有鸿鹄志，应骑骏马踏平川。

PS：米字旗画法请见
https://jingyan.baidu.com/album/46650658c93d6cf548e5f877.html
--------------------------------------------------------------*/
//-->
</script>

END

相关推荐
前端_yu小白8 小时前
html，css，js实现电子点名绘制和下载
javascript·canvas·电子签名·js图片生成
糖墨夕2 天前
【3】Threejs环境光、点光源、聚光灯等常见光源类型对比
前端·three.js·canvas
八了个戒2 天前
「数据可视化 D3系列」入门第七章：坐标轴的使用
前端·javascript·数据可视化·canvas·d3
八了个戒2 天前
「数据可视化 D3系列」入门第二章：选择器与数据绑定
前端·javascript·数据可视化·canvas·d3
八了个戒5 天前
「数据可视化 D3系列」入门第一章：Hello D3.js
开发语言·前端·javascript·数据可视化·canvas
亦黑迷失5 天前
实现 canvas 交互（元素的事件处理）
前端·typescript·canvas
张风捷特烈7 天前
平面上的三维空间#04 | 万物之母 - 三角形
android·flutter·canvas
敲敲敲敲暴你脑袋7 天前
从零开始用Canvas画一个2D地图
typescript·数据可视化·canvas
热门推荐
01YOLOv8改进 | 细节创新篇 | iAFF迭代注意力特征融合助力多目标细节涨点02我决定放弃搞 Java 了03RAG 实践- Ollama+RagFlow 部署本地知识库04如何用 AI 工具做数据分析与可视化？05Scipy||第三章 线性代数 (scipy.linalg)06DeepSeek各版本说明与优缺点分析07避免IP地址关联，多个手机设备的完美公网IP问题08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10将 DeepSeek 集成到 Spring Boot 项目实现通过 AI 对话方式操作后台数据