【Canvas与艺术】绘制美国星条旗

news2024/11/17 9:54:34

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>使用HTML5/Canvas绘制美国星条旗</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 RATIO=2;

// 高宽
const WIDTH=RATIO*380;
const HEIGHT=RATIO*200;

// 舞台对象
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);// 清屏    

            
        writeText(ctx,WIDTH/2-20,HEIGHT/2-10,"逆火原创","8px consolas","black");// 版权
    }

    // 画前景
    this.paintFg=function(ctx){
        // 十三根横条
        for(var i=0;i<13;i++){
            ctx.fillStyle=(i % 2==0)?"rgb(178,34,52)":"white";
            ctx.fillRect(-WIDTH/2, -HEIGHT/2+HEIGHT/13*i, WIDTH, HEIGHT/13);         
        }

        // 左上角蓝底
        var D=WIDTH/5*2;
        var C=HEIGHT/13*7;
        ctx.fillStyle = "rgb(60,59,110)";
        ctx.fillRect(-WIDTH/2, -HEIGHT/2, D, C);

        // 准备画星星
        const r=5*RATIO;

        // 五行六列星星
        for(var i=0;i<6;i++){
            for(var j=0;j<5;j++){                
                var x=D/12+2*i*D/12-WIDTH/2;
                var y=C/10+2*j*C/10-HEIGHT/2;

                draw5Star(ctx,x,y,r);
                ctx.fillStyle = "white";
                ctx.fill();
            }
        }

        // 五行四列星星
        for(var i=0;i<5;i++){
            for(var j=0;j<4;j++){
                var x=D/6+2*i*D/12-WIDTH/2;
                var y=C/5+2*j*C/10-HEIGHT/2;

                draw5Star(ctx,x,y,r);
                ctx.fillStyle = "white";
                ctx.fill();
            }
        }
    }
}

/*--------------------------------------------------
函数:绘制正五角星的推荐画法
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){
    var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7);
    
    var arr=[0,0,0,0,0,0,0,0,0,0];

    // 顶五点
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2-Math.PI/10;
        var x1=R*Math.cos(theta)+x;
        var y1=R*Math.sin(theta)+y;
        arr[i*2]=createPt(x1,y1);
    }

    // 内五点
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2+Math.PI/10;
        var x1=r*Math.cos(theta)+x;
        var y1=r*Math.sin(theta)+y;
        arr[i*2+1]=createPt(x1,y1);
    }

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

/*----------------------------------------------------------
函数:创建一个二维坐标点
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();
}

/*-------------------------------------------------------------
内事纷乱怨资本,外事不顺赖美的。
--------------------------------------------------------------*/
//-->
</script>

END

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1630240.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis分区指南:如何实现高可用与扩展性

大家好!我是你们的技术小伙伴小米~今天我们要聊一聊Redis分区容错问题中的数据分区这个话题。在大数据量的应用中,合理的数据分区是至关重要的。我们会从Hash、一致性Hash、Codis的Hash槽以及RedisCluster四个方面来探讨。快来一起学习吧! Hash:基础但不稳定 在Redis的分…

力扣HOT100 - 78. 子集

解题思路&#xff1a; class Solution {public List<List<Integer>> subsets(int[] nums) {List<List<Integer>> lists new ArrayList<>(); // 解集lists.add(new ArrayList<Integer>()); // 首先将空集加入解集中for(int i 0; i < n…

极简shell制作

&#x1f30e;自定义简单shell制作 &#xff08;ps: 文末有完整代码&#xff09; 文章目录&#xff1a; 自定义简单shell制作 简单配置Linux文件 自定义Shell编写 命令行解释器       获取输入的命令       字符串分割       子进程进行进程替换 内建命令…

商品计划在服装品牌供应链管理中的突出地位

在服装行业中&#xff0c;商品计划是供应链管理的核心&#xff0c;它影响着产品的设计、生产、分销和销售。一个精准的商品计划能够使品牌在竞争激烈的市场中保持领先地位&#xff0c;同时满足消费者的需求和预期。 商品计划的定义与重要性 定义 商品计划是服装品牌基于市场趋…

梯度下降中学习率的调节与优化技巧

在深度学习和机器学习的世界中&#xff0c;梯度下降算法无疑占据了举足轻重的地位。作为优化算法的核心&#xff0c;梯度下降通过迭代的方式&#xff0c;不断调整模型的参数&#xff0c;以最小化损失函数&#xff0c;进而提升模型的预测性能。而在梯度下降的过程中&#xff0c;…

Linux红帽(RHCE)认证学习笔记-(1)Linux 文件管理

Linux 文件管理 1. Linux下的目录结构 / 是Linux里的根目录 Linux的一级目录 /boot &#xff1a;存放的是系统的启动配置⽂件和内核⽂件/dev &#xff1a;存放的是Linux的设备⽂件/etc&#xff1a;存放的是Linux下的配置文件/home&#xff1a;存放普通用户的家目录/media&am…

15天搭建ETF量化交易系统Day1—数据源模块

搭建过程 每个交易者都应该形成一套自己的交易系统。 很多交易者也清楚知道&#xff0c;搭建自己交易系统的重要性。现实中&#xff0c;从&#xff10;到&#xff11;往往是最难跨越的一步。 授人鱼不如授人以渔&#xff0c;为了帮助大家跨出搭建量化系统的第一步&#xff0c;我…

Edge浏览器新特性深度解析,写作ai免费软件

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

Adfind的使用

Adfind是一个使用C语言写的活动目录查询工具&#xff0c;它允许用户轻松地搜索各种活动目录信息。它不需要安装&#xff0c;因为它是基于命令行的。它提供了许多选项&#xff0c;可以细化搜索并返回相关细节。下面讲解Adfind的参数以及其使用。 参数 执行如下命令即可查看Adf…

机器学习周记(第三十六周:语义分割)2024.4.22~2024.4.28

目录 摘要 ABSTRACT 1 FCN 2 双线性插值 3 膨胀卷积 3.1 gridding effect 摘要 本周继续学习了语义分割的内容&#xff0c;主要包括 FCN&#xff08;全卷积网络&#xff09;、双线性插值和膨胀卷积等方面。FCN 通过上采样的倍率可以划分为 FCN-32S、FCN-16S、FCN-8S&…

Unity | 优化专项-包体 | 字体

1. 字体包体占用 常用汉字字体文件大小通常在 10M~12M 左右&#xff0c;大概包含常见汉字 3.5w 个。我国汉字有大约将近十万个&#xff0c;全字库的大小对于游戏包体是灾难性的 在小游戏中&#xff0c;即使是常见汉字&#xff0c;大小也足以影响小游戏总包体&#xff0c;进而…

深入探索计算机视觉:高级主题与前沿应用的全面解析

引言 计算机视觉&#xff0c;作为人工智能领域的一个重要分支&#xff0c;旨在让计算机能够“看”懂世界&#xff0c;理解和解释视觉场景。随着深度学习技术的迅猛发展&#xff0c;计算机视觉已经在许多领域取得了显著的进展&#xff0c;如自动驾驶、安防监控、医疗诊断等。在…

vue使用source map调试

一、开发环境 1、开启配置&#xff1a;devtool: ‘eval-source-map’,跟mode配置平级 效果就是控制台报错行数和源码行数完全一致 二、生产环境 1、在生产环境下&#xff0c;一般要关闭source map&#xff0c;如果只想定位报错的具体行数&#xff0c;且不想暴露源码。此时可…

《苍穹外卖》Day11部分知识点记录(数据统计——图像报表)

一、Apache ECharts 介绍 Apache ECharts是一款基于javascript的数据可视化图标库&#xff0c;提供直观、生动、可交互、可个性化定制的数据可视化图表。 官网地址&#xff1a;https://echarts.apache.org/zh/index.html 效果展示 柱形图饼图折线图 入门案例 1. 在 echart…

CAS机制(Compare And Swap)源码解读与三大问题

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java源码解读-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 原子性问题 3. 乐观锁与悲观锁 4. CAS操作 5. CAS算法带来的…

【算法】组合回溯专题

组合总数 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复被…

MySQL-多表查询-练习

练习 1.写一个查询显示所有雇员的 last name、department id、anddepartment name。 SELECT e.LAST_NAME,e.DEPARTMENT_ID,d.DEPARTMENT_NAME FROM employees e,departments d WHERE e.DEPARTMENT_ID d.DEPARTMENT_ID;2.创建一个在部门 80 中的所有工作岗位的唯一列表&#x…

2024长三角快递物流展:科技激荡,行业焕发新活力

7月8日&#xff0c;杭州将迎来快递物流科技盛宴&#xff0c;这是一年一度的行业盛会&#xff0c;吸引了全球领先的快递物流企业和创新技术汇聚一堂。届时&#xff0c;会展中心将全方位展示快递物流及供应链、分拣系统、输送设备、智能搬运、智能仓储、自动识别、无人车、AGV机器…

nginx修改http为https

Linux运维工具-ywtool 目录 一. 获取 SSL 证书1.安装openssl2.自签名证书 二.安装SSL证书三.配置Nginx支持HTTPS四.重启nginx 一. 获取 SSL 证书 SSL/TLS证书是用来验证服务器身份和提供一个安全的连接通道的 获取SSL/TLS证书有几种方法 1.购买域名,购买SSL证书 2.自签名证书…

测试基础 学习测试你必须要知道的基础知识

1.认识测试 在学习测试之前,我们需要明白以下几点 1.什么是测试 2.测试的岗位有哪些 3.测试开发和开发之间的区别 4.优秀的测试人员需要有哪些品质 我们大概说一说 其实生活中处处有测试 我们试衣服 我们在买手机之前先看手机功能符不符合需求 这些都是测试 测试主要就是为了发…