canvas绘制中国国旗！

最新推荐文章于 2024-01-24 00:00:00 发布
最新推荐文章于 2024-01-24 00:00:00 发布
阅读量2.5k 收藏 22
点赞数 3
分类专栏： js html 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wsh20210301/article/details/117196332
版权
js 同时被 2 个专栏收录
20 篇文章 0 订阅
订阅专栏
html
14 篇文章 0 订阅
订阅专栏

绘制中国国旗

1、题目

今天刚学了H5中的画布canvas元素，课堂上的案例挺有意思，就心血来潮想利用canvas绘制中国国旗；

2、思路

  1. 第一步，创建画布元素，在画布内作好辅助线和网格线来确定圆的位置；
  2. 第二步，作好网格线后，我们先定好大圆的坐标和小圆的坐标；
  3. 第三步，绘制出一个大圆和四个小圆；
  4. 第四步，在大圆内绘制出五角星，和在第一个小圆内画出五角星，旋转画布为固定的弧度值绘制出其他三个小五角星，并且将大五角星和四个小五角星的元素填充至黄色（外边轮廓默认为黑色）；
  5. 第五步，五星红旗绘制完毕，取消辅助线渲染至页面；

3、效果展示图

（过程图）：

在这里插入图片描述
（展示图）：
在这里插入图片描述

4、写法

绘制辅助线和网格：

  1. 将页面红色区域分为四个部分，做一条横向和竖向辅助线，将第二象限的区域绘制网格；
  2. 有了网格可以确定五角星的位置，我们将大五角星的坐标用网格坐标表示出来，同样的将四个小五角星的坐标用网格坐标表示出来，将小五角星的坐标用数组存起来；

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

绘制大圆和小圆：

  1. 利用大五角星的网格坐标*画布高度，绘制路径将大圆绘制在画布中；
  2. 利用小五角星的网格坐标*画布高度，绘制路径将小圆绘制在画布中；
    在这里插入图片描述

绘制大五角星和四个小五角星：

  1. 在大圆中确定圆心作为原点，在大圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；
  2. 在小圆中确定圆心作为原点，在小圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；
    在这里插入图片描述

封装绘制五角星函数：

  1. 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离radius,rotate=0时一个顶点在对称轴上 ； rotate:绕对称轴旋转rotate弧度
  2. 计算五角星在圆内部的顶点的角度，在循环中绘制出五角星的五条边，将顶点依次连接起来；
  3. 旋转画布，创建出剩余的五角星；
    在这里插入图片描述

5、参考代码块

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="canvas" width="600" height="400"></canvas>

        <script type="text/javascript">

            // 使用HTML5绘制五星红旗   

            var canvas = document.getElementById("canvas");   

            var context = canvas.getContext('2d');   

            var width = canvas.width;  //确定画布的宽度（600）

            var height = width * 2 / 3;  //确定画布的高度 （400）

            var w = width / 30;//小网格的宽   （20）

            context.fillStyle = "red";   

            context.fillRect(0, 0, width, height);   

            var maxR = 0.15, minR = 0.05;//大五角星的半径，小五角星的半径

            var maxX = 0.25, maxY = 0.25;//大五星的位置   

            // 小五角星的位置
            var minX = [0.50, 0.60, 0.60, 0.50];   

            var minY = [0.10, 0.20, 0.35, 0.45];   

            // 画大 ☆   

            var ox = height * maxX, oy = height * maxY;   

            create5star(context, ox, oy, height * maxR, "#ff0", 0);//绘制五角星   

            // 画小 ★   

            for (var idx = 0; idx < 4; idx++) {   

                var sx = minX[idx] * height, sy = minY[idx] * height;  

                // 计算大五角星圆心和小五角星圆心连线的斜率（也就是画布旋转的弧度值）
                var theta = Math.atan((oy - sy) / (ox - sx));   

                create5star(context, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta);   

            }   

            //辅助线   

            // context.moveTo(0, height / 2)   

            // context.lineTo(width, height / 2);   

            // context.stroke();   

            // context.moveTo(width / 2, 0);   

            // context.lineTo(width / 2, height);   

            // context.stroke();   

            //画网格，竖线   

            // for (var j = 0; j < 15; j++) {   

            //     context.moveTo(j * w, 0);   

            //     context.lineTo(j * w, height / 2);   

            //     context.stroke();   

            // }   

            //画网格，横线   

            // for (var j = 0; j < 10; j++) {   

            //     context.moveTo(0, j * w);   

            //     context.lineTo(width / 2, j * w);   

            //     context.stroke();   

            // }   

            //画大圆   

            // context.beginPath();   

            // context.arc(ox, oy, maxR * height, 0, Math.PI * 2, false);   

            // context.closePath();   

            // context.stroke();   

            // 画小圆   

            // for (var idx = 0; idx < 4; idx++) {   

            //     context.beginPath();   

            //     var sx = minX[idx] * height, sy = minY[idx] * height;   

            //     context.arc(sx, sy, height * minR, 0, Math.PI * 2, false);   

            //     context.closePath();   

            //     context.stroke();   

            // }   

            //大圆中心与小圆中心连接线   

            // for (var idx = 0; idx < 4; idx++) {   

            //     context.moveTo(ox, oy);   

            //     var sx = minX[idx] * height, sy = minY[idx] * height;   

            //     context.lineTo(sx, sy);   

            //     context.stroke();   

            // }   

            //绘制五角星   

            /**   

             * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上   

             * rotate:绕对称轴旋转rotate弧度   

             */   

            function create5star(context, sx, sy, radius, color, rotato){   

                context.save();   

                context.fillStyle = color;   

                context.translate(sx, sy);//移动坐标原点   

                context.rotate(Math.PI + rotato);//旋转   

                context.beginPath();//创建路径   

                var x = Math.sin(0);   

                var y = Math.cos(0);   

                var dig = Math.PI / 5 * 4;   

                for (var i = 0; i < 5; i++) {//画五角星的五条边   

                    var x = Math.sin(i * dig);   

                    var y = Math.cos(i * dig);   

                    context.lineTo(x * radius, y * radius);   

                }   

                context.closePath();   

                context.stroke();   

                context.fill();   

                context.restore();   

            }   

        </script>

    </body>

</html>

6、总结

绘制五星红旗，样式其实蛮简单，主要是五星红旗的五角星很难想到如何绘制，以及计算角度很麻烦，如果克服了这些就没有什么难度了。

小猫爱摸鱼
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
史上最详细的使用canvas绘制五星红旗的方法
qq_39155611的博客
06-12 2815
史上最详细的使用canvas绘制五角星的方法 昨天我们在课堂上讲到了HTML5中的canvas标签，canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。当天布置的作业就是利用canvas画布绘制五星红旗。如图： 上篇文章我们已经讲到了五星红旗的制法说明。 （一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。 （二）五星之位置与画法如下: 为便于确定五
使用canvas绘制钟表
11-06
本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML页面中创建一个canvas元素，并设置其id以便在JavaScript中引用： ```html <canvas id=...
用canvas画一个五星红旗
m0_49266584的博客
12-05 1176
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>五星红旗</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="300px" h
用canvas来致敬国旗
qiukui111的博客
10-11 836
用canvas来致敬国旗 技术说明: 懂一些最基础的html语法 懂一些javascript 最重要的是：失败了一次不要放弃 直接上效果图 二话不多逼逼，看代码： <!-- 开发者：逆风 时间：2019/10/11 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
国庆节，我们用代码来画个国旗～
爱编程的鱼的博客
09-29 1354
如果你刚好闲的无聊，想想以前每次放假，本来放假前想好出去干啥干啥的，最后都是窝在家里敲代码了。可能很多人还是如此，那么怎样给这一天的代码的添上一点色彩？为何不做点有意思的东西？恰巧是国庆，那就让我们以一种不同的方式来庆祝她。庆祝祖国的67岁生日。让我们用不同的语言来编织我们的五星红旗……第一个：HTML + JavaScript。第三个：Python（版本是2.7）
Python GUI编程(Turtle)——绘制中国五星红旗
热门推荐
q879521072的博客
04-23 2万+
Python turtle绘制 国旗—五星红旗 # 中华人民共和国国旗是五星红旗，中华人民共和国的象征和标志。中华人民共和国国旗的设计者是曾联松， # 旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。 # 一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。 # 中华人民共和国国旗于1949年7月14日至8月15日开始征求国旗图案。 # 1949年8月20日，国旗国徽评选委员会共收到了2992幅（一说为3012幅）国旗图案。 # 1949年
canvas绘制美国国旗（USA Flag）
大剑师兰特的GIS世界
01-24 1352
如何使用canvas绘制绘制美国国旗呢？思路很简单，绘制矩形，绘制五角星，上下做一个布局就可以了。美国国旗的形状是长方形；国旗的长宽之比为19:10，由红、白、蓝三色组成；画面格局由两部分组成，旗的左上方蓝底上排列着50颗白色的星，6颗一排与5颗一排相间排列，共排9行；旗的其余部分是13道红白相间的条子，有7道红色横条以及6道白色横条。
HTML5 Canvas 绘制新西兰国旗
weixin_33872660的博客
09-04 136
代码： &lt;!DOCTYPE html&gt; &lt;html lang="utf-8"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;head&gt; &lt;title&gt;新西兰国旗&lt;/title
vue+canvas绘制图形
01-09
在`Canvas.vue`内部，我们将定义`<canvas>`标签，并通过JavaScript来操作其上下文（`canvas.getContext('2d')`），实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”，这通常意味着...
ECG html canvas绘制心电图
08-22
ECG html canvas绘制心电图
canvas绘制动态心电图
05-08
这篇内容主要探讨如何使用Canvas来绘制动态心电图，这在医疗健康应用、生理数据监测等领域非常有用，它可以让用户在浏览器上实时查看心电图数据，效果如同监护仪一样。 首先，了解Canvas的基本操作是必要的。Canvas...
canvas绘制表盘时钟
08-31
Canvas API 是一种在网页上动态绘制图形的强大工具，它允许开发者通过JavaScript代码进行像素级别的操作，创建出丰富的视觉效果。 首先，我们创建一个HTML文件，并在`<body>`部分设置一个`<canvas>`元素，用于显示...
如何用JS实现轮播图！
Wsh20210301的博客
04-20 1684
轮播图 1.思路与写法 1.1 首先我们拿到一个关于轮播图的实例我们要分析里面的功能，将其模块化处理； 1.2 首先需要实现的是自动轮播的效果： 1.2.1需要用到运动函数框架，startMove()，还需要用到定时器，这里我们用的是多次调用的延时定时器达到效果； 1.2.2对dom元素的操作，获取它的样式； 1.3其次实现上下按钮实现上一页和下一页的切换，对其绑定鼠标点击事件，同时需要获取该元素的节点； 1.4最后实现底部的小圆圈的固定切换，需要对其绑定鼠标点击事件，这里用到获取该元素的节点，利用排他思想
Js实现深克隆和浅克隆的方法！
Wsh20210301的博客
08-07 1194
深克隆和浅克隆的定义 浅克隆定义： 直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址。 浅克隆代码： function lowClone(Clone){ let obj={}; for(let key in Clone){ obj[key]=Clone[key] } return obj; } let a = {
班级点名器！
Wsh20210301的博客
04-21 1161
点名器： 1、题目 利用定时器的原理写出一个简单的班级点名器，样式自拟，实现功能即可！ 思路与写法： （1）、拿到一个案例，我们首先要写出html的页面结构来，将班级上所以名字写到 li 的文本节点里，便于用 js 来操作元素样式； （2）、写好页面后，我们需要用到鼠标点击事件，控制点名器的开始与结束； （3）、如何实现点名器每次只出现一个人呢，那我们就需要用到循环定时器； （4）、将鼠标点击事件和定时器结合起来就可以啦，需要注意的是及时清理定时器，否则会出现bug; （5）、利用排他思想，给随机位置的当前
如何用JS实现城市三级联动!
Wsh20210301的博客
04-19 1107
如何用js实现城市三级联动 1.思路及写法 （1）、首先在网上下载我们所需要用到的json包，里面包含中国的省份以及对应的地级市和县级单位； （2）、第一步首先遍历一下json包里面的对象，分析如何将省份和地级市和县级单位对应起来，可以发现每一个里面都有唯一的code！ （3）、遍历一遍省份，创建34个对象，将每个省份分别插入到相应的第一个下拉框中； （4）、同上省份中的一样，创建省份下对应的市级单位创建对象插入到第二个下拉框中，可以利用code唯一的原理判断与之相对应的地级市； （5）、同上市区中的一样，
单对象编程实现2048小游戏！
Wsh20210301的博客
05-22 715
2048小Demo 1、题目 在百度搜索引擎搜索2048，我们可以在线玩2048 Game - Play 2048 GameOnline，同学都说很好玩，我就花了点时间简单的写了下，样式很简易！ 2、思路 （1）、首先我们要对这个游戏有一个简单的了解，2048是按下上下左右将相同且相邻数字相同的数字相加，然后在随机位置随机生成一个新的数字，将每一列或者每一行的数字移动到最边缘，碰到相邻的相同数字就相加，没有碰到相同的数字就移动，每次移动后在页面中重新生成一个新的数字，当页面的数字都充满格子游戏就结束了
由typeof 检测出null是Object类型引发的一些列疑问？
Wsh20210301的博客
08-04 629
1.javaScirpt的数据类型有哪些？ 基本数据类型：（5种） Undefined Null Boolean String Number 引用数据类型：（1种） Object (注意：array，function,object都属于Object） Es6新增的数据类型：（1种） symbol 2.常用的检测数据类型的方法有哪些呢? typeof typeof 可以判断的类型： number、boolean、symbol、string、object、undefined、function 优
canvas绘制二维码
最新发布
03-01
要使用Canvas绘制二维码，可以借助第三方库QRCode.js来生成二维码图像数据，然后将图像数据绘制到Canvas上。 以下是使用Canvas绘制二维码的骤： 1. 引入QRCode.js库：在HTML文件中引入QRCode.js库，可以通过CDN链接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值