当前位置:   article > 正文

Uni-App 画布 Canvas 用法小练之画个五角星_uniapp 使用三角函数

uniapp 使用三角函数

先上效果图如下:

 

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

 代码如下:

  1. <template>
  2. <view>
  3. <canvas style="width: 300px; height: 300px;" canvas-id="myCanvas" id="myCanvas"></canvas>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. onReady: function(e) {
  9. var context = uni.createCanvasContext('myCanvas');
  10. //矩形宽度
  11. var recW = 300;
  12. //18度角
  13. var angle18 = Math.PI / 10;
  14. //36度角
  15. var angle36 = Math.PI / 5;
  16. //18度角对应的sin值(三角函数)
  17. var sin18 = Math.sin(angle18);
  18. //36度角对应的sin值(三角函数)
  19. var sin36 = Math.sin(angle36);
  20. //18度角对应的cos值(三角函数)
  21. var cos18 = Math.cos(angle18);
  22. //36度角对应的cos值(三角函数)
  23. var cos36 = Math.cos(angle36);
  24. //根据矩形宽度计算出矩形高度
  25. var recH = (recW * (1 + cos36)) / (2 * cos18);
  26. //图中OA两点之间的距离
  27. var oa = recW / (2 * cos18);
  28. //五角星相邻两个顶点之间的距离,以AA_为例
  29. var aa_ = recW / (2 * (1 + sin18));
  30. //图中五角星各顶点坐标(A/B/C/D/E/A_/B_/C_/D_/E_)(x:x坐标,y:y坐标)
  31. var pointA = {
  32. x: recW / 2,
  33. y: 0
  34. };
  35. var pointB = {
  36. x: recW,
  37. y: oa * (1 - sin18)
  38. };
  39. var pointC = {
  40. x: (recW / 2) + oa * sin36,
  41. y: recH
  42. };
  43. var pointD = {
  44. x: (recW / 2) - oa * sin36,
  45. y: recH
  46. };
  47. var pointE = {
  48. x: 0,
  49. y: oa * (1 - sin18)
  50. };
  51. var pointA_ = {
  52. x: aa_ * (1 + 2 * sin18),
  53. y: aa_ * cos18
  54. };
  55. var pointB_ = {
  56. x: recW - aa_ * cos36,
  57. y: aa_ * cos18 + aa_ * sin36
  58. };
  59. var pointC_ = {
  60. x: (recW - aa_) * cos36,
  61. y: recH - aa_ * sin36
  62. };
  63. var pointD_ = {
  64. x: aa_ * Math.cos(angle36),
  65. y: aa_ * cos18 + aa_ * sin36
  66. };
  67. var pointE_ = {
  68. x: aa_,
  69. y: aa_ * cos18
  70. };
  71. var pointO = {
  72. x: recW / 2,
  73. y: oa
  74. };
  75. //设置画笔颜色
  76. context.setStrokeStyle('red');
  77. context.setFillStyle('red');
  78. //设置画笔宽度
  79. context.setLineWidth(2);
  80. //绘制红色矩形背景
  81. context.fillRect(0, 0, recW, recH);
  82. //绘制五个黄色三角形
  83. context.beginPath();
  84. context.moveTo(pointO.x, pointO.y);
  85. context.lineTo(pointA.x, pointA.y);
  86. context.lineTo(pointA_.x, pointA_.y);
  87. context.moveTo(pointO.x, pointO.y);
  88. context.lineTo(pointB.x, pointB.y);
  89. context.lineTo(pointB_.x, pointB_.y);
  90. context.moveTo(pointO.x, pointO.y);
  91. context.lineTo(pointC.x, pointC.y);
  92. context.lineTo(pointC_.x, pointC_.y);
  93. context.moveTo(pointO.x, pointO.y);
  94. context.lineTo(pointD.x, pointD.y);
  95. context.lineTo(pointD_.x, pointD_.y);
  96. context.moveTo(pointO.x, pointO.y);
  97. context.lineTo(pointE.x, pointE.y);
  98. context.lineTo(pointE_.x, pointE_.y);
  99. context.setFillStyle('yellow');
  100. context.fill();
  101. //绘制五个绿色三角形
  102. context.beginPath();
  103. context.moveTo(pointO.x, pointO.y);
  104. context.lineTo(pointA_.x, pointA_.y);
  105. context.lineTo(pointB.x, pointB.y);
  106. context.moveTo(pointO.x, pointO.y);
  107. context.lineTo(pointB_.x, pointB_.y);
  108. context.lineTo(pointC.x, pointC.y);
  109. context.moveTo(pointO.x, pointO.y);
  110. context.lineTo(pointC_.x, pointC_.y);
  111. context.lineTo(pointD.x, pointD.y);
  112. context.moveTo(pointO.x, pointO.y);
  113. context.lineTo(pointD_.x, pointD_.y);
  114. context.lineTo(pointE.x, pointE.y);
  115. context.moveTo(pointO.x, pointO.y);
  116. context.lineTo(pointE_.x, pointE_.y);
  117. context.lineTo(pointA.x, pointA.y);
  118. context.setFillStyle('green');
  119. context.fill();
  120. //将之前在绘图上下文中的描述画到canvas中
  121. context.draw();
  122. }
  123. }
  124. </script>
  125. <style>
  126. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小舞很执着/article/detail/741702
推荐阅读
相关标签
  

闽ICP备14008679号