canvas

解释:canvas 画布,可使用 JS 操作 canvas 上下文,发出指令,进行绘制。

# 示例

# 扫码体验

请使用百度APP扫码

# 图片示例

# 代码示例

在开发者工具中预览效果

    <canvas canvas-id="myCanvas" />
    
    Page({
        onReady: function () {
            const CanvasContext = this.createCanvasContext('myCanvas');
            CanvasContext.setFillStyle('#ff0000');
            CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
            CanvasContext.fill();
            CanvasContext.draw();
        }
    });
    

    我们来回顾一下,刚刚都执行了哪些指令:

    1、创建绘图上下文

    推荐使用 Page 对象上挂载的createCanvasContext方法,进行绘制上下文的创建:

      Page({
          onReady: function () {
              const CanvasContext = this.createCanvasContext('myCanvas');
      	}
      });
      
      

      当然,也可以使用 SWAN 上挂载的createCanvasContext方法。
      如下,我们调用 SWAN 的接口createCanvasContext创建了一个绘制上下文(但请注意,使用 SWAN 上挂载的createCanvasContext,会在当前用户可见的 Page 中寻找canvas)。

        const CanvasContext = swan.createCanvasContext('myCanvas');
        

        2、发送绘制指令

        设置颜色,并画一个圆,填充。

          CanvasContext.setFillStyle('#ff0000');
          CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
          CanvasContext.fill();
          

          3、绘制
          执行上面已经发出的指令,进行 canvas 绘制。

            CanvasContext.draw();
            

            # 坐标系

            canvas 坐标系,以左上角为(0, 0),横轴为 x,纵轴为 y。
            如:CanvasContext.arc(100, 200, 50, 0, 2 * Math.PI);命令,就是在x: 100,y: 200为圆心处,开始画圆。

            我们可以在 canvas 中加上一些事件,来观测它的坐标系。

            代码示例 :

            在开发者工具中预览效果

              <canvas canvas-id="myCanvas"
                style="margin: 5px; border:1px solid #d3d3d3;"
                bindtouchstart="start"
                bindtouchmove="move"
                bindtouchend="end"/>
              <view hidden="{{hidden}}">
                Coordinates: ({{x}}, {{y}})
              </view>
              
              Page({
                data: {
                  x: 0,
                  y: 0,
                  hidden: true
                },
                start (e) {
                  this.setData({
                    hidden: false,
                    x: e.touches[0].x,
                    y: e.touches[0].y
                  })
                },
                move (e) {
                  this.setData({
                    x: e.touches[0].x,
                    y: e.touches[0].y
                  })
                },
                end (e) {
                  this.setData({
                    hidden: true
                  })
                }
              })
              

              # 常见问题

              # Q:小程序页面头部可否支持渐变色?

              A:使用 navigationBarBackgroundColor 无法做到渐变色的效果,可以选择使用透明框,新增返回按钮,然后进行设置。或将navigationStyle 设置成 custom,在全屏页面中制作导航栏,自定义背景色。

              在开发者工具中预览效果

              代码示例

              <canvas canvas-id="myCanvas" class="myCanvas"/>
              </canvas>
              <view>内容</view>
              
              Page({
                  onReady: function () {
                      const canvasContext = this.createCanvasContext('myCanvas');
                      const grd = canvasContext.createLinearGradient(0, 0, 200, 200);
                      grd.addColorStop(0, 'blue');
                      grd.addColorStop(1, 'red');
                      canvasContext.setFillStyle(grd);
                      canvasContext.fillRect(0, 0, 800, 100);
                      canvasContext.draw();
                  }
              });