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

先上效果图如下：

 

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

 代码如下：

<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>