赞
踩
先上效果图如下:
计算方式:根据矩形宽度,计算出矩形高度、五角星中心点到远顶点的距离、五角星各个顶点的坐标等,图示如下:
代码如下:
- <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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。