当前位置:Gxlcms > JavaScript > 使用JS+canvas如何制作圆锥

使用JS+canvas如何制作圆锥

时间:2021-07-01 10:21:17 帮助过:15人阅读

本篇文章给大家讲解html中用canvas函数配合JS画出一个圆锥形的图形实例,有需要的朋友学习测试下吧。

以下是我们给大家分享是实例代码:

  1. <html>
  2. <head>
  3. <title>我的第一个 HTML 页面</title>
  4. </head>
  5. <body>
  6. <canvas id='cvs' width='1000' height="800">
  7. </canvas>
  8. <script>
  9. const cvs =document.getElementById('cvs');
  10. // 计算画布的宽度
  11. const width = cvs.offsetWidth;
  12. // 计算画布的高度
  13. const height = cvs.offsetHeight;
  14. const ctx = cvs.getContext('2d');
  15. // 设置宽高
  16. cvs.width = width;
  17. cvs.height = height;
  18. /**
  19. ctx:context
  20. x,y:偏移 纵横坐标
  21. w:度
  22. h:高
  23. color:颜色 数组,可以把颜色提取出来方便自定义
  24. */
  25. var Cone = function(ctx,x,y,w,h,d,color){
  26. ctx.save();
  27. ctx.translate(x, y);
  28. var blockHeight=h;
  29. // 中点
  30. var x2 = 0;
  31. var y2 = 20;
  32. var k2 = 10;
  33. var w2 = w;
  34. var h2 = h;
  35. // 递减度
  36. var decrease = d;
  37. ctx.beginPath();
  38. ctx.moveTo(x2+w2,y2);
  39. // 椭圆加了边框,所以加1减1
  40. ctx.bezierCurveTo(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2-1, y2);
  41. ctx.lineTo(x2-w2+decrease,y2+blockHeight);
  42. ctx.bezierCurveTo(x2-w2+decrease, y2+blockHeight+k2, x2+w2-decrease, y2+blockHeight+k2, x2+w2-decrease, y2+blockHeight);
  43. ctx.lineTo(x2+w2+1,y2);
  44. var linear = ctx.createLinearGradient(x2-w2, y2,x2+w2-decrease, y2+blockHeight);
  45. linear.addColorStop(0,color[0]);
  46. linear.addColorStop(1,color[1]);
  47. ctx.fillStyle = linear ;
  48. ctx.strokeStyle=linear
  49. ctx.fill();
  50. //ctx.stroke();
  51. ctx.closePath();
  52. //画椭圆
  53. ctx.beginPath();
  54. ctx.moveTo(x2-w2, y2);
  55. ctx.bezierCurveTo(x2-w2, y2-k2, x2+w2, y2-k2, x2+w2, y2);
  56. ctx.bezierCurveTo(x2+w2, y2+k2, x2-w2, y2+k2, x2-w2, y2);
  57. var linear = ctx.createLinearGradient(x2-w2, y2,x2+w2-decrease, y2+blockHeight);
  58. linear.addColorStop(1,color[0]);
  59. linear.addColorStop(0,color[1]);
  60. ctx.fillStyle = linear ;
  61. ctx.strokeStyle=linear
  62. ctx.closePath();
  63. ctx.fill();
  64. ctx.stroke();
  65. ctx.restore();
  66. };
  67. function dr(m){
  68. const colorList =[
  69. {
  70. color:['#76e3ff','#2895ea'],
  71. height:60
  72. },
  73. {
  74. color:['#17ead9','#5d7ce9'],
  75. height:30
  76. },
  77. {
  78. color:['#1ca5e5','#d381ff'],
  79. height:40
  80. },
  81. {
  82. color:['#ffa867','#ff599e'],
  83. height:70
  84. },
  85. {
  86. color:['#ffa6e3','#ec6a70'],
  87. height:50
  88. },
  89. {
  90. color:['#f9c298','#d9436a'],
  91. height:30
  92. },
  93. {
  94. color:['#eb767b','#9971dc'],
  95. height:30
  96. },
  97. {
  98. color:['#f06af9','#5983ff'],
  99. height:100
  100. },
  101. ];
  102. const space = 20;
  103. let coneHeight = 0;
  104. // 间隔
  105. const gap = 20;
  106. const x = 380;
  107. const y = 20;
  108. const angle = 30;
  109. let coneWidth=0;
  110. colorList.forEach((item)=>{
  111. coneHeight += item.height +space;
  112. });
  113. // 最下面的先画(层级)
  114. colorList.reverse().forEach((item,index)=>{
  115. const decrease =Math.tan(Math.PI*angle/180)*(item.height+space);
  116. coneWidth=coneWidth + decrease;
  117. coneHeight = coneHeight-item.height - space;
  118. //圆锥
  119. Cone(ctx,x,coneHeight ,coneWidth ,item.height,decrease,item.color);
  120. // 中点
  121. const cX =parseInt(x)+0.5;
  122. const cY = parseInt(coneHeight + space+ item.height/2)+0.5;
  123. //文字
  124. ctx.save();
  125. ctx.translate(cX , cY );
  126. ctx.textBaseline='top';
  127. ctx.textAlign='center';
  128. const fontSize = item.height/2>=40?40:item.height/2;
  129. ctx.font = fontSize + 'px serif';
  130. //const textMetrics = ctx.measureText('Hello World');
  131. ctx.fillStyle = '#ffffff';
  132. ctx.fillText('5000',0,-fontSize/3);
  133. ctx.restore();
  134. const xLineA =parseInt(coneWidth-decrease/2)+10;
  135. const xLine =parseInt(m+xLineA )>=x?x:m+xLineA ;
  136. //线
  137. ctx.save();
  138. ctx.translate(cX , cY );
  139. ctx.setLineDash([3,2]);
  140. ctx.strokeStyle = '#a4a4a4';
  141. ctx.beginPath();
  142. ctx.moveTo(xLineA , 0);
  143. ctx.lineTo(xLine +20, 0);
  144. ctx.stroke();
  145. ctx.restore();
  146. //描述文字
  147. ctx.save();
  148. ctx.translate(cX , cY );
  149. ctx.textBaseline='middle';
  150. ctx.textAlign='left';
  151. ctx.font = '22px serif';
  152. //const textMetrics = ctx.measureText('Hello World');
  153. ctx.fillStyle = '#4a4a4a';
  154. ctx.fillText('进入收件列表2',xLine+gap ,0);
  155. ctx.restore();
  156. //转化率文字
  157. ctx.save();
  158. ctx.translate(cX , cY );
  159. ctx.textBaseline='middle';
  160. ctx.textAlign='left';
  161. ctx.font = '28px bold serif ';
  162. ctx.fillStyle = '#007dfd';
  163. ctx.fillText('20%',xLine+gap ,(item.height+gap)/2 );
  164. ctx.restore();
  165. });
  166. }
  167. let m=0;
  168. let gravity =10;
  169. (function drawFrame(){
  170. window.requestAnimationFrame(drawFrame,cvs);
  171. ctx.clearRect(0,0,cvs.width,cvs.height);
  172. m += gravity;
  173. dr(m);
  174. })();
  175. </script>
  176. </body>
  177. </html>

这是脚本之家测试后的完成图:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Django与Vue语法中存在冲突问题如何解决

有关JS抽象工厂模式(详细教程)

使用Javascript如何开发二维周视图日历

以上就是使用JS+canvas如何制作圆锥的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行