官网canvas教程里的例子运行有bug

jacky

参考canvas教程里的代码：

1. <template>
2. <div class="doc-page">
3. <div class="content">
4. <canvas class="new_canvas" id="newCanvas"></canvas>
5. </div>
6. </div>
7. </template>
9. <style>
10. .content {
11. flex-direction: column;
12. align-items: center;
13. border-width: 10px;
14. border-color: #0000FF;
15. width: 100%;
16. }
17. .new_canvas {
18. border-width: 5px;
19. border-color: #2F4F4F;
20. height: 380px;
21. width: 380px;
22. }
23. </style>
25. <script>
26. export default {
27. private:{
28. },
29. onInit(){
30. },
31. onShow(){
32. this.drawCanvas();
33. },
34. drawCanvas(){
35. const canvas = this.$element('newCanvas'); //获取 canvas 组件
36. const ctx = canvas.getContext('2d'); //获取 canvas 绘图上下文
38. console.log(canvas);
39. console.log(canvas.style);
40. console.log(JSON.stringify(canvas.attr));
41. console.log(canvas.height);
43. var r = 20;
44. var h = 380;
45. var p = Math.PI;
47. ctx.beginPath();
48. ctx.moveTo(r * 2, r);
49. ctx.arc(r * 2, r * 2, r, -p / 2, -p, true);
50. ctx.lineTo(r, h - r * 2);
51. ctx.arc(r * 2, h - r * 2, r, p, p / 2, true);
52. ctx.lineTo(h - r * 2, h - r);
53. ctx.arc(h - r * 2, h - r * 2, r, p / 2, 0, true);
54. ctx.lineTo(h - r, r * 2);
55. ctx.arc(h - r * 2, r * 2, r, 0, -p / 2, true);
56. ctx.closePath();
57. ctx.stroke();
59. var s = 60;
61. ctx.beginPath();
62. ctx.moveTo(h / 2 + s, h / 2);
63. ctx.arc(h / 2, h / 2, s, 0, -p / 2 * 3, true);
64. ctx.arc(h / 2, h / 2 + s + s / 2, s / 2, -p / 2, p / 2, false);
65. ctx.arc(h / 2, h / 2, s * 2, -p / 2 * 3, 0, false);
66. ctx.arc(h / 2 + s + s / 2, h / 2, s / 2, 0, p, false);
67. ctx.moveTo(h / 2 + s * 2, h / 2 + s + s / 2);
68. ctx.arc(h / 2 + s + s / 2, h / 2 + s + s / 2, s / 2, 0, p * 2, false);
69. ctx.moveTo(h / 2 + s / 4 * 3, h / 2 + s / 2);
70. ctx.arc(h / 2 + s / 2, h / 2 + s / 2, s / 4, 0, p * 2, false);
71. ctx.fill();
72. }
73. }
74. </script>

复制代码

同一个页面进去再出来，来回几次画出来的东西就不一样了，见图：

jacky

10次以内比现

jacky

另外不能获取长宽和麻烦

管理员

您好，感谢您提出，这个问题已经反馈给开发了，后续会修复的哦