canvas绘制中国国旗！

最新推荐文章于 2024-01-24 00:00:00 发布

小猫爱摸鱼

最新推荐文章于 2024-01-24 00:00:00 发布

阅读量2.5k

点赞数 3

分类专栏： js html 文章标签： html5

本文链接：https://blog.csdn.net/Wsh20210301/article/details/117196332

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

绘制中国国旗

1、题目

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

2、思路

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

3、效果展示图

（过程图）：

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

4、写法

绘制辅助线和网格：

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

在这里插入图片描述

绘制大圆和小圆：

利用大五角星的网格坐标*画布高度，绘制路径将大圆绘制在画布中；
利用小五角星的网格坐标*画布高度，绘制路径将小圆绘制在画布中；

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

在大圆中确定圆心作为原点，在大圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；
在小圆中确定圆心作为原点，在小圆上绘制出五个顶点，绘制路径将其连接起来，填充五角星；

封装绘制五角星函数：

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

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绘制中国国旗！

绘制中国国旗1、题目今天刚学了H5中的画布canvas元素，课堂上的案例挺有意思，就心血来潮想利用canvas绘制中国国旗；2、思路第一步，创建画布元素，在画布内作好辅助线和网格线来确定圆的位置；第二步，作好网格线后，我们先定好大圆的坐标和小圆的坐标；第三步，绘制出一个大圆和四个小圆；第四步，在大圆内绘制出五角星，和在第一个小圆内画出五角星，旋转画布为固定的弧度值绘制出其他三个小五角星，并且将大五角星和四个小五角星的元素填充至黄色（外边轮廓默认为黑色）；第五步，五星红旗绘制完毕，取消辅
复制链接

扫一扫