title: canvas 画布 header: develop nav: component sidebar: canvas

webUrl: https://qft12m.smartapps.cn/component/canvas/canvas

解释：画布。画布是一个矩形区域，开发者可以在页面上绘制图形。canvas 拥有多种绘制路径、矩形、图形、字符以及添加图像的方法。相关api：swan.createCanvasContext该组件是客户端创建的原生组件，使用时请注意相关限制。

属性说明

属性名 类型 默认值 必填 说明
canvas-id String 是 canvas 组件的唯一标识符
disable-scroll Boolean false 否 当在 canvas 中移动且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart EventHandle 否 手指触摸动作开始
bindtouchmove EventHandle 否 手指触摸后移动
bindtouchend EventHandle 否 手指触摸动作结束
bindtouchcancel EventHandle 否 手指触摸动作被打断，如来电提醒，弹窗
bindlongtap EventHandle 否 手指长按 350ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror EventHandle 否 当发生错误时触发 error 事件，detail = {errMsg: ‘something wrong’}

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/canvas/canvas - 图1 请使用百度APP扫码

代码示例1

:::codeTab

  1. <view class="canvas-view">
  2.     <canvas 
  3.         canvas-id="myCanvas" 
  4.         disable-scroll="false" 
  5.         class="canvas" 
  6.         width="610"
  7.         height="610">
  8.     </canvas>
  9. </view>
  1. Page({
  2.     data: {},
  3.     onReady() {
  4.         this.point = {
  5.             x: Math.random() * 305,
  6.             y: Math.random() * 305,
  7.             dx: Math.random() * 10,
  8.             dy: Math.random() * 10,
  9.             r: Math.round(Math.random() * 255 | 0),
  10.             g: Math.round(Math.random() * 255 | 0),
  11.             b: Math.round(Math.random() * 255 | 0)
  12.         };
  14.         this.interval = setInterval(this.draw.bind(this), 17);
  16.         // 使用 swan.createContext 获取绘图上下文 context
  17.         this.ctx = swan.createCanvasContext('myCanvas');
  18.     },
  19.     draw() {
  20.         const { ctx } = this;
  21.         ctx.setFillStyle('#FFF');
  22.         ctx.fillRect(0, 0, 610, 610);
  24.         ctx.beginPath();
  25.         ctx.arc(this.point.x, this.point.y, 14, 0, 2 * Math.PI);
  26.         ctx.setFillStyle('rgb(' + this.point.r + ', ' + this.point.g + ', ' + this.point.b + ')');
  27.         ctx.fill();
  28.         ctx.draw();
  30.         this.point.x += this.point.dx;
  31.         this.point.y += this.point.dy;
  32.         if (this.point.x <= 10 || this.point.x >= 305) {
  33.             this.point.dx = -this.point.dx;
  34.             this.point.r = Math.round(Math.random() * 255 | 0);
  35.             this.point.g = Math.round(Math.random() * 255 | 0);
  36.             this.point.b = Math.round(Math.random() * 255 | 0);
  37.         }
  39.         if (this.point.y <= 10 || this.point.y >= 305) {
  40.             this.point.dy = -this.point.dy;
  41.             this.point.r = Math.round(Math.random() * 255 | 0);
  42.             this.point.g = Math.round(Math.random() * 255 | 0);
  43.             this.point.b = Math.round(Math.random() * 255 | 0);
  44.         }
  45.     }
  46. });
  1. .canvas-view {
  2.   display: flex;
  3.   justify-content: center;
  4.   background-color: rgba(235, 229, 229, 0.5);
  5. }
  7. .canvas {
  8.   width: 610rpx;
  9.   height: 610rpx;
  10.   background-color: #fff;
  11. }

:::

代码示例2

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <view class="circlePostion">
  3.         <canvas class="circle" canvas-id="mycanvas"></canvas>
  4.         <view class="centerText">{{resultComment}}</view>
  5.     </view>
  6. </view>
  1. Page({
  2.     data: {
  3.         timer: ''
  4.     },
  5.     onLoad() {
  6.         let totalItems = 100;
  7.         let rightItems = 80;
  8.         let completePercent = parseInt((rightItems / totalItems) * 100);
  9.         this.getResultComment(completePercent);
  10.         this.showScoreAnimation(rightItems, totalItems);
  11.     },
  13.     showScoreAnimation(rightItems, totalItems) {
  14.         let that = this;
  15.         let copyRightItems = 0;
  16.         that.setData({
  17.             timer: setInterval(function () {
  18.                 copyRightItems++;
  19.                 if (copyRightItems == rightItems) {
  20.                     clearInterval(that.data.timer)
  21.                 } else {
  22.                     // 灰色底层
  23.                     let ctx = swan.createCanvasContext('mycanvas');
  24.                     ctx.setLineWidth(6);
  25.                     ctx.setStrokeStyle('#DCDCDC');
  26.                     ctx.setLineCap('round');
  27.                     ctx.beginPath();
  28.                     ctx.arc(53, 53, 50, 0, 2 * Math.PI, false);
  29.                     ctx.stroke();
  30.                     ctx.setLineWidth(6);
  31.                     ctx.setStrokeStyle('#38f');
  32.                     ctx.setLineCap('round')
  33.                     ctx.beginPath();
  34.                     ctx.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);
  35.                     ctx.stroke();
  36.                     ctx.draw();
  37.                 }
  38.             }, 20)
  39.         })
  40.     },
  42.   getResultComment(completePercent) {
  43.     let that = this;
  44.     switch (true) {
  45.         case completePercent < 60:
  46.             that.setData({
  47.                 resultComment: "不及格"
  48.             })
  49.         break;
  50.         case completePercent >= 60 && completePercent <= 80:
  51.             that.setData({
  52.                 resultComment: "中等"
  53.             })
  54.         break;
  55.         case completePercent >= 80 && completePercent < 90:
  56.             that.setData({
  57.                 resultComment: "良好"
  58.             })
  59.         break;
  60.         case completePercent >= 90 && completePercent < 100:
  61.             that.setData({
  62.                 resultComment: "优秀"
  63.             }) 
  64.         }
  65.     },
  66. })

:::

Bug & Tip

  • Tip：canvas 组件不能使用动画进行控制。
  • Tip：组件默认宽度 300px、高度 225px。
  • Tip：基础库版本1.12.0开始支持事件捕获、冒泡。