canvas 画布

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

属性说明

属性名类型默认值必填说明
canvas-idStringcanvas 组件的唯一标识符
disable-scrollBooleanfalse当在 canvas 中移动且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bindtouchstartEventHandle手指触摸动作开始
bindtouchmoveEventHandle手指触摸后移动
bindtouchendEventHandle手指触摸动作结束
bindtouchcancelEventHandle手指触摸动作被打断,如来电提醒,弹窗
bindlongtapEventHandle手指长按 350ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderrorEventHandle当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}

示例

在开发者工具中预览效果

扫码体验

canvas 画布 - 图3请使用百度APP扫码

代码示例1

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

代码示例2

在开发者工具中预览效果

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

Bug & Tip

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