Uni-App 画布 Canvas 用法小练之画个五角星

╰+哭是因爲堅強的太久メ 2024-04-01 15:51 48阅读 0赞

先上效果图如下：

![fa93904d621b4f629d7db4a74b1388d6.png][]

计算方式：根据矩形宽度，计算出矩形高度、五角星中心点到远顶点的距离、五角星各个顶点的坐标等，图示如下：

![7040fd77d1614988b8ee9697f1ae917c.png][]

代码如下：

<template>
        <view>
            <canvas style="width: 300px; height: 300px;" canvas-id="myCanvas" id="myCanvas"></canvas>
        </view>
    </template>
    
    <script>
        export default {
            onReady: function(e) {
                var context = uni.createCanvasContext('myCanvas');
                //矩形宽度
                var recW = 300;
                //18度角
                var angle18 = Math.PI / 10;
                //36度角
                var angle36 = Math.PI / 5;
                //18度角对应的sin值（三角函数）
                var sin18 = Math.sin(angle18);
                //36度角对应的sin值（三角函数）
                var sin36 = Math.sin(angle36);
                //18度角对应的cos值（三角函数）
                var cos18 = Math.cos(angle18);
                //36度角对应的cos值（三角函数）
                var cos36 = Math.cos(angle36);
                //根据矩形宽度计算出矩形高度                             
                var recH = (recW * (1 + cos36)) / (2 * cos18);
                //图中OA两点之间的距离
                var oa = recW / (2 * cos18);
                //五角星相邻两个顶点之间的距离，以AA_为例
                var aa_ = recW / (2 * (1 + sin18));
                //图中五角星各顶点坐标（A/B/C/D/E/A_/B_/C_/D_/E_）（x:x坐标，y：y坐标）
                var pointA = {
                    x: recW / 2,
                    y: 0
                };
                var pointB = {
                    x: recW,
                    y: oa * (1 - sin18)
                };
                var pointC = {
                    x: (recW / 2) + oa * sin36,
                    y: recH
                };
                var pointD = {
                    x: (recW / 2) - oa * sin36,
                    y: recH
                };
                var pointE = {
                    x: 0,
                    y: oa * (1 - sin18)
                };
                var pointA_ = {
                    x: aa_ * (1 + 2 * sin18),
                    y: aa_ * cos18
                };
                var pointB_ = {
                    x: recW - aa_ * cos36,
                    y: aa_ * cos18 + aa_ * sin36
                };
                var pointC_ = {
                    x: (recW - aa_) * cos36,
                    y: recH - aa_ * sin36
                };
                var pointD_ = {
                    x: aa_ * Math.cos(angle36),
                    y: aa_ * cos18 + aa_ * sin36
                };
                var pointE_ = {
                    x: aa_,
                    y: aa_ * cos18
                };
                var pointO = {
                    x: recW / 2,
                    y: oa
                };
                //设置画笔颜色
                context.setStrokeStyle('red');
                context.setFillStyle('red');
                //设置画笔宽度
                context.setLineWidth(2);
                //绘制红色矩形背景
                context.fillRect(0, 0, recW, recH);
    
                //绘制五个黄色三角形
                context.beginPath();
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointA.x, pointA.y);
                context.lineTo(pointA_.x, pointA_.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointB.x, pointB.y);
                context.lineTo(pointB_.x, pointB_.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointC.x, pointC.y);
                context.lineTo(pointC_.x, pointC_.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointD.x, pointD.y);
                context.lineTo(pointD_.x, pointD_.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointE.x, pointE.y);
                context.lineTo(pointE_.x, pointE_.y);
                context.setFillStyle('yellow');
                context.fill();
    
                //绘制五个绿色三角形
                context.beginPath();
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointA_.x, pointA_.y);
                context.lineTo(pointB.x, pointB.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointB_.x, pointB_.y);
                context.lineTo(pointC.x, pointC.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointC_.x, pointC_.y);
                context.lineTo(pointD.x, pointD.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointD_.x, pointD_.y);
                context.lineTo(pointE.x, pointE.y);
                context.moveTo(pointO.x, pointO.y);
                context.lineTo(pointE_.x, pointE_.y);
                context.lineTo(pointA.x, pointA.y);
                context.setFillStyle('green');
                context.fill();
                //将之前在绘图上下文中的描述画到canvas中
                context.draw();
            }
        }
    </script>
    
    <style>
    </style>

[fa93904d621b4f629d7db4a74b1388d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1de3e6232cb44dc48ea00a441502ffe0.png
[7040fd77d1614988b8ee9697f1ae917c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8b757a36c63c44258e6856e2884dcb77.png