史上最详细的使用canvas绘制五星红旗的方法

史上最详细的使用canvas绘制五角星的方法

昨天我们在课堂上讲到了HTML5中的canvas标签，canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。当天布置的作业就是利用canvas画布绘制五星红旗。如图：

上篇文章我们已经讲到了五星红旗的制法说明。

（一）旗面为红色，长方形，其长与高为三与二之比，旗面左上方缀黄色五角星五颗。一星较大，其外接圆直径为旗高十分之三，居左；四星较小，其外接圆直径为旗高十分之一，环拱于大星之右。旗杆套为白色。

（二）五星之位置与画法如下:

为便于确定五星之位置，先将旗面对分为四个相等的长方形，将左上方之长方形上下划为十等分，左右划为十五等分。
大五角星的中心点，在该长方形上五下五、左五右十之处。其画法为:以此点为圆心，以三等分为半径作一圆。在此圆周上，定出五个等距离的点，其一点须位于圆之正上方。然后将此五点中各相隔的两点相联，使各成一直线。此五直线所构成之外轮廓线，即为所需之大五角星。五角星之一个角尖正向上方。
四颗小五角星的中心点，第一点在该长方形上二下八、左十右五之处，第二点在上四下六、左十二右三之处，第三点在上七下三、左十二右三之处，第四点在上九下一、左十右五之处。其画法为:以以上四点为圆心，各以一等分为半径，分别作四个圆。在每个圆上各定出五个等距离的点，其中均须各有一点位于大五角星中心点与以上四个圆心的各联结线上。然后用构成大五角星的同样方法，构成小五角星。此四颗小五角星均各有一个角尖正对大五角星的中心点。

效果如图：

接下来我们来讲解一下怎样使用canvas画布来绘制五星红旗。

HTML代码：

    <canvas id="my_canvas"></canvas>

CSS代码：

        * {margin: 0;padding: 0;}canvas {background: red;}

Javascript代码：

    //获取画布var oCanvas = document.getElementById("my_canvas");// 设置画布的尺寸oCanvas.width = 300;oCanvas.height = 200;// 获取/创建画布环境var myCanvas = oCanvas.getContext("2d");// 画线条函数function line(x1, y1, x2, y2) {myCanvas.moveTo(x1,y1);myCanvas.lineTo(x2,y2);myCanvas.stroke();}// line(0,100,300,100);// line(150,0,150,200);// 画网格  横线  参考线// for (var i = 0; i < 10; i++) {//     myCanvas.moveTo(0, i * 10);//     myCanvas.lineTo(150, i * 10);//     myCanvas.stroke();// }// 竖线// for (var i = 0; i < 15; i++) {//     myCanvas.moveTo(i * 10, 0);//     myCanvas.lineTo(i * 10, 100);//     myCanvas.stroke();// }// 画参考圆的方法function circle(x, y, r) {myCanvas.beginPath();myCanvas.arc(x, y, r, 0, Math.PI * 2);myCanvas.strokeStyle = "yellow";myCanvas.stroke();}// 画大圆// circle(50, 50, 30);// 画小圆// circle(100, 20, 10);// circle(120, 40, 10);// circle(120, 70, 10);// circle(100, 90, 10);// 画大五角星star(50, 50, 30,0);// 画小五角星star(100, 20, 10,Math.atan((50-20)/(50-100))-Math.PI/2);star(120, 40, 10,Math.atan((50-40)/(50-120))-Math.PI/2);star(120, 70, 10,Math.atan((50-70)/(50-120))-Math.PI/2);star(100, 90, 10,Math.atan((50-90)/(50-100))-Math.PI/2);// 绘制五角星的方法function star(x, y, r,deg) {myCanvas.save();myCanvas.translate(x, y);myCanvas.rotate(deg)myCanvas.beginPath();var x = 0,y = 0;var du = Math.PI * 4 / 5;for (var i = 0; i < 5; i++) {myCanvas.lineTo(Math.cos(i * du - Math.PI / 2) * r, Math.sin(i * du - Math.PI / 2) * r);}myCanvas.closePath();// myCanvas.stroke();myCanvas.fillStyle = "yellow";myCanvas.fill();myCanvas.restore();}// 封装前的方法，操作// myCanvas.lineTo(0,-30);// myCanvas.lineTo(Math.cos(du-Math.PI/2)*30,Math.sin(du-Math.PI/2)*30);// myCanvas.lineTo(Math.cos(2*du-Math.PI/2)*30,Math.sin(2*du-Math.PI/2)*30);// myCanvas.lineTo(Math.cos(3*du-Math.PI/2)*30,Math.sin(3*du-Math.PI/2)*30);// myCanvas.lineTo(Math.cos(4*du-Math.PI/2)*30,Math.sin(4*du-Math.PI/2)*30);// myCanvas.translate(50,50);// myCanvas.beginPath();// myCanvas.arc(0,0,50,0,Math.PI/2);// myCanvas.strokeStyle="blue";// myCanvas.stroke();// myCanvas.strokeStyle="black";// line(50,50,100,20);// line(50,50,120,40);// line(50,50,120,70);// line(50,50,100,90);

总结： 绘制五星红旗首先要知道五星红旗的制作说明，其次在这里还要用到我们中学所学到的三角函数的知识。

视频讲解链接：
https://www.bilibili.com/video/BV1Lp4y1D7ZU/

史上最详细的使用canvas绘制五星红旗的方法相关推荐

android qq消息数拖拽动画,史上最详细仿QQ未读消息拖拽粘性效果的实现
好久没写文章了,前段时间由于项目代码重构忙了一段时间,现在终于有点时间了就为大家带来一篇关于动画学习的自定义View:类似QQ消息拖拽的效果. 其实QQ当时更新的时候我还没注意到这个小红点是可以拖拽的 ...
史上最详细的微生物扩增子数据库整理
声明:文件所有链接内容来自"生信控"公众号,已经获作者向屿授权. 本人对每个数据库的使用目的和经验配导读,需要使用的小伙伴读点击链接跳转原文学习. "生信控"相 ...
史上最详细版Centos6安装详细教程
镜像CentOS-6.8-x86_64-bin-DVD1.ISO 将下载好的镜像上传到服务器,并选择该镜像(详情请看上篇exsi镜像上传文章) 一.安装开始开机选择第一项这里询问我们是否要对光盘进 ...
史上最详细“截图”搭建Hexo博客——For Windows
http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...
不仅有史上最详细Docker 安装Minio Client，还附带解决如何设置永久访问和永久下载链接！！（详图）绝对值得收藏的哈！！！！
背景: 这两天在整理知识点,然后在学习Minio,一开始遇到更新,整了我不少时间,之前用的太久了,改了不少东西.用了之后发现不知道怎么设置成永久访问,就出了这篇文章. 史上最详细Docker安装最新版 ...
史上最详细Docker安装最新版Minio 带详解绝对值得收藏！！！让我们一起学会使用minio搭建属于自己的文件服务器！！走上白嫖之路！解决启动了但是浏览器访问不了的原因
让我们一起学会使用minio搭建属于自己的文件服务器!!走上白嫖之路! WARNING: Console endpoint is listening on a dynamic port (34451) ...
史上最详细阿里云服务器上Docker部署War包项目实战每一步都带详细图解！！！
史上最详细阿里云服务器上Docker部署War包项目实战每一步都带详细图解!!! 部署jar 包方式: https://blog.csdn.net/weixin_45821811/article/d ...
史上最详细的Android Studio系列教程四--Gradle基础
史上最详细的Android Studio系列教程四--Gradle基础转载于:https://www.cnblogs.com/zhujiabin/p/5125917.html
史上最详细的MySQL操作事例
史上最详细的MySQL操作事例文章目录史上最详细的MySQL操作事例一.数据库的操作二.数据表的操作三.数据表的增删查该四.数据准备五.条件查询六.排序七.聚合函数八.分组九.分 ...

史上最详细的使用canvas绘制五星红旗的方法

史上最详细的使用canvas绘制五角星的方法

史上最详细的使用canvas绘制五星红旗的方法相关推荐

最新文章

热门文章