请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

开发问题 官网canvas教程里的例子运行有bug

3
回复
306
查看
[复制链接]

2

主题

11

帖子

65

积分

 楼主| 2018-9-14 09:31:28 显示全部楼层 |阅读模式
参考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>

  8. <style>
  9.   .content {
  10.     flex-direction: column;
  11.     align-items: center;
  12.     border-width: 10px;
  13.     border-color: #0000FF;
  14.     width: 100%;
  15.   }
  16.   .new_canvas {
  17.     border-width: 5px;
  18.     border-color: #2F4F4F;
  19.     height: 380px;
  20.     width: 380px;
  21.   }
  22. </style>

  23. <script>
  24.   export default {
  25.     private:{
  26.     },
  27.     onInit(){
  28.     },
  29.     onShow(){
  30.       this.drawCanvas();
  31.     },
  32.     drawCanvas(){
  33.       const canvas = this.$element('newCanvas'); //获取 canvas 组件
  34.       const ctx = canvas.getContext('2d'); //获取 canvas 绘图上下文

  35.       console.log(canvas);
  36.       console.log(canvas.style);
  37.       console.log(JSON.stringify(canvas.attr));
  38.       console.log(canvas.height);

  39.       var r = 20;
  40.       var h = 380;
  41.       var p = Math.PI;

  42.       ctx.beginPath();
  43.       ctx.moveTo(r * 2, r);
  44.       ctx.arc(r * 2, r * 2, r, -p / 2, -p, true);
  45.       ctx.lineTo(r, h - r * 2);
  46.       ctx.arc(r * 2, h - r * 2, r, p, p / 2, true);
  47.       ctx.lineTo(h - r * 2, h - r);
  48.       ctx.arc(h - r * 2, h - r * 2, r, p / 2, 0, true);
  49.       ctx.lineTo(h - r, r * 2);
  50.       ctx.arc(h - r * 2, r * 2, r, 0, -p / 2, true);
  51.       ctx.closePath();
  52.       ctx.stroke();

  53.       var s = 60;

  54.       ctx.beginPath();
  55.       ctx.moveTo(h / 2 + s, h / 2);
  56.       ctx.arc(h / 2, h / 2, s, 0, -p / 2 * 3, true);
  57.       ctx.arc(h / 2, h / 2 + s + s / 2, s / 2, -p / 2, p / 2, false);
  58.       ctx.arc(h / 2, h / 2, s * 2, -p / 2 * 3, 0, false);
  59.       ctx.arc(h / 2 + s + s / 2, h / 2, s / 2, 0, p, false);
  60.       ctx.moveTo(h / 2 + s * 2, h / 2 + s + s / 2);
  61.       ctx.arc(h / 2 + s + s / 2, h / 2 + s + s / 2, s / 2, 0, p * 2, false);
  62.       ctx.moveTo(h / 2 + s / 4 * 3, h / 2 + s / 2);
  63.       ctx.arc(h / 2 + s / 2, h / 2 + s / 2, s / 4, 0, p * 2, false);
  64.       ctx.fill();
  65.     }
  66.   }
  67. </script>
复制代码
同一个页面进去再出来,来回几次画出来的东西就不一样了,见图:

1889935618.jpg
756951782.jpg
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 2018-9-14 09:32:09 显示全部楼层
10次以内比现
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 2018-9-14 09:41:49 显示全部楼层
另外不能获取长宽和麻烦
回复

使用道具 举报

199

主题

355

帖子

3315

积分

2018-9-15 12:07:01 显示全部楼层
您好,感谢您提出,这个问题已经反馈给开发了,后续会修复的哦
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册