feat(web): 新增 canvas 示例

pages.json

@@ -50,6 +50,14 @@
         "navigationBarTitleText": "button"
       }
     },
+    // #ifdef WEB
+    {
+      "path": "pages/component/canvas/canvas",
+      "style": {
+        "navigationBarTitleText": "canvas"
+      }
+    },
+    // #endif
     {
       "path": "pages/component/radio/radio",
       "style": {
@@ -246,6 +254,14 @@
         "backgroundColor": "#F8F8F8"
       }
     },
+    // #ifdef WEB
+    {
+      "path": "pages/API/canvas/canvas",
+      "style": {
+        "navigationBarTitleText": "创建绘画"
+      }
+    },
+    // #endif
     {
       "path": "pages/API/get-app/get-app",
       "style": {

pages/API/canvas/canvas.uvue

+<template>
+  <view>
+    <page-head :title="title"></page-head>
+    <view class="uni-common-mt">
+      <canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
+      <scroll-view class="canvas-buttons" scroll-y="true">
+        <block v-for="(name, index) in names" :key="index">
+          <button class="canvas-button" @click="handleCanvasButton(name)">{{name}}</button>
+        </block>
+        <button class="canvas-button" @click="toTempFilePath" type="primary">toTempFilePath</button>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+<script>
+  var context = null;
+  export default {
+    data() {
+      return {
+        title: 'createContext',
+        names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill",
+          "stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc",
+          "quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha",
+          "setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit"
+        ]
+      }
+    },
+    onReady: function () {
+      context = uni.createCanvasContext('canvas', this)
+    },
+    methods: {
+      toTempFilePath: function () {
+        uni.canvasToTempFilePath({
+          canvasId: 'canvas',
+          success: function (res) {
+            console.log(res.tempFilePath)
+          },
+          fail: function (err) {
+            console.error(JSON.stringify(err))
+          }
+        })
+      },
+      handleCanvasButton: function (name) {
+        this[name] && this[name]();
+      },
+      rotate: function () {
+        context.beginPath()
+        context.rotate(10 * Math.PI / 180)
+        context.rect(225, 75, 20, 10)
+        context.fill()
+        context.draw()
+      },
+      scale: function () {
+        context.beginPath()
+        context.rect(25, 25, 50, 50)
+        context.stroke()
+
+        context.scale(2, 2)
+
+        context.beginPath()
+        context.rect(25, 25, 50, 50)
+        context.stroke()
+        context.draw()
+      },
+      reset: function () {
+        context.beginPath()
+
+        context.setFillStyle('#000000')
+        context.setStrokeStyle('#000000')
+        context.setFontSize(10)
+        context.setGlobalAlpha(1)
+        context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
+
+        context.setLineCap('butt')
+        context.setLineJoin('miter')
+        context.setLineWidth(1)
+        context.setMiterLimit(10)
+        context.draw()
+      },
+      translate: function () {
+        context.beginPath()
+        context.rect(10, 10, 100, 50)
+        context.fill()
+
+        context.translate(70, 70)
+
+        context.beginPath()
+        context.fill()
+        context.draw()
+      },
+      save: function () {
+        context.beginPath()
+        context.setStrokeStyle('#00ff00')
+        context.save()
+
+        context.scale(2, 2)
+        context.setStrokeStyle('#ff0000')
+        context.rect(0, 0, 100, 100)
+        context.stroke()
+        context.restore()
+
+        context.rect(0, 0, 50, 50)
+        context.stroke()
+        context.draw()
+      },
+      restore: function () {
+        [3, 2, 1].forEach(function (item) {
+          context.beginPath()
+          context.save()
+          context.scale(item, item)
+          context.rect(10, 10, 100, 100)
+          context.stroke()
+          context.restore()
+        });
+        context.draw()
+      },
+      drawImage: function () {
+        // #ifdef APP-PLUS
+        context.drawImage('../../../static/app-plus/uni@2x.png', 0, 0)
+        // #endif
+        // #ifndef APP-PLUS
+        context.drawImage('../../../static/uni.png', 0, 0)
+        // #endif
+        context.draw()
+      },
+      fillText: function () {
+        context.setStrokeStyle('#ff0000')
+
+        context.beginPath()
+        context.moveTo(0, 10)
+        context.lineTo(300, 10)
+        context.stroke()
+        // context.save()
+        // context.scale(1.5, 1.5)
+        // context.translate(20, 20)
+        context.setFontSize(10)
+        context.fillText('Hello World', 0, 30)
+        context.setFontSize(20)
+        context.fillText('Hello World', 100, 30)
+
+        // context.restore()
+
+        context.beginPath()
+        context.moveTo(0, 30)
+        context.lineTo(300, 30)
+        context.stroke()
+        context.draw()
+      },
+      fill: function () {
+        context.beginPath()
+        context.rect(20, 20, 150, 100)
+        context.setStrokeStyle('#00ff00')
+        context.fill()
+        context.draw()
+      },
+      stroke: function () {
+        context.beginPath()
+        context.moveTo(20, 20)
+        context.lineTo(20, 100)
+        context.lineTo(70, 100)
+        context.setStrokeStyle('#00ff00')
+        context.stroke()
+        context.draw()
+      },
+      clearRect: function () {
+        context.setFillStyle('#ff0000')
+        context.beginPath()
+        context.rect(0, 0, 300, 150)
+        context.fill()
+        context.clearRect(20, 20, 100, 50)
+        context.draw()
+      },
+      beginPath: function () {
+        context.beginPath()
+        context.setLineWidth(5)
+        context.setStrokeStyle('#ff0000')
+        context.moveTo(0, 75)
+        context.lineTo(250, 75)
+        context.stroke()
+        context.beginPath()
+        context.setStrokeStyle('#0000ff')
+        context.moveTo(50, 0)
+        context.lineTo(150, 130)
+        context.stroke()
+        context.draw()
+      },
+      closePath: function () {
+        context.beginPath()
+        context.setLineWidth(1)
+        context.moveTo(20, 20)
+        context.lineTo(20, 100)
+        context.lineTo(70, 100)
+        context.closePath()
+        context.stroke()
+        context.draw()
+      },
+      moveTo: function () {
+        context.beginPath()
+        context.moveTo(0, 0)
+        context.lineTo(300, 150)
+        context.stroke()
+        context.draw()
+      },
+      lineTo: function () {
+        context.beginPath()
+        context.moveTo(20, 20)
+        context.lineTo(20, 100)
+        context.lineTo(70, 100)
+        context.stroke()
+        context.draw()
+      },
+      rect: function () {
+        context.beginPath()
+        context.rect(20, 20, 150, 100)
+        context.stroke()
+        context.draw()
+      },
+      arc: function () {
+        context.beginPath()
+        context.setLineWidth(2)
+        context.arc(75, 75, 50, 0, Math.PI * 2, true)
+        context.moveTo(110, 75)
+        context.arc(75, 75, 35, 0, Math.PI, false)
+        context.moveTo(65, 65)
+        context.arc(60, 65, 5, 0, Math.PI * 2, true)
+        context.moveTo(95, 65)
+        context.arc(90, 65, 5, 0, Math.PI * 2, true)
+        context.stroke()
+        context.draw()
+      },
+      quadraticCurveTo: function () {
+        context.beginPath()
+        context.moveTo(20, 20)
+        context.quadraticCurveTo(20, 100, 200, 20)
+        context.stroke()
+        context.draw()
+      },
+      bezierCurveTo: function () {
+        context.beginPath()
+        context.moveTo(20, 20)
+        context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+        context.stroke()
+        context.draw()
+      },
+      setFillStyle: function () {
+        ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
+          context.setFillStyle(item)
+          context.beginPath()
+          context.rect(0 + 75 * index, 0, 50, 50)
+          context.fill()
+        })
+        context.draw()
+      },
+      setStrokeStyle: function () {
+        ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
+          context.setStrokeStyle(item)
+          context.beginPath()
+          context.rect(0 + 75 * index, 0, 50, 50)
+          context.stroke()
+        })
+        context.draw()
+      },
+      setGlobalAlpha: function () {
+        context.setFillStyle('#000000');
+        [1, 0.5, 0.1].forEach(function (item, index) {
+          context.setGlobalAlpha(item)
+          context.beginPath()
+          context.rect(0 + 75 * index, 0, 50, 50)
+          context.fill()
+        })
+        context.draw()
+        context.setGlobalAlpha(1)
+      },
+      setShadow: function () {
+        context.beginPath()
+        context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
+        context.rect(10, 10, 100, 100)
+        context.fill()
+        context.draw()
+      },
+      setFontSize: function () {
+        [10, 20, 30, 40].forEach(function (item, index) {
+          context.setFontSize(item)
+          context.fillText('Hello, world', 20, 20 + 40 * index)
+        })
+        context.draw()
+      },
+      setLineCap: function () {
+        context.setLineWidth(10);
+        ['butt', 'round', 'square'].forEach(function (item, index) {
+          context.beginPath()
+          context.setLineCap(item)
+          context.moveTo(20, 20 + 20 * index)
+          context.lineTo(100, 20 + 20 * index)
+          context.stroke()
+        })
+        context.draw()
+      },
+      setLineJoin: function () {
+        context.setLineWidth(10);
+        ['bevel', 'round', 'miter'].forEach(function (item, index) {
+          context.beginPath()
+          context.setLineJoin(item)
+          context.moveTo(20 + 80 * index, 20)
+          context.lineTo(100 + 80 * index, 50)
+          context.lineTo(20 + 80 * index, 100)
+          context.stroke()
+        })
+        context.draw()
+      },
+      setLineWidth: function () {
+        [2, 4, 6, 8, 10].forEach(function (item, index) {
+          context.beginPath()
+          context.setLineWidth(item)
+          context.moveTo(20, 20 + 20 * index)
+          context.lineTo(100, 20 + 20 * index)
+          context.stroke()
+        })
+        context.draw()
+      },
+      setMiterLimit: function () {
+        context.setLineWidth(4);
+        [2, 4, 6, 8, 10].forEach(function (item, index) {
+          context.beginPath()
+          context.setMiterLimit(item)
+          context.moveTo(20 + 80 * index, 20)
+          context.lineTo(100 + 80 * index, 50)
+          context.lineTo(20 + 80 * index, 100)
+          context.stroke()
+        })
+        context.draw()
+      }
+    }
+  }
+</script>
+
+<style>
+  .canvas-element-wrapper {
+    display: block;
+    margin-bottom: 100rpx;
+  }
+
+  .canvas-element {
+    width: 100%;
+    height: 500rpx;
+    background-color: #ffffff;
+  }
+
+  .canvas-buttons {
+    padding: 30rpx 50rpx 10rpx;
+    width: 100%;
+    height: 360rpx;
+    box-sizing: border-box;
+  }
+
+  .canvas-button {
+    float: left;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    line-height: 1;
+    width: 300rpx;
+    margin: 15rpx 12rpx;
+  }
+</style>

pages/component/canvas/canvas.uvue

+<template>
+  <view>
+    <view class="page-body">
+      <!-- #ifdef APP-PLUS || H5 -->
+      <canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start"
+        :data-width="canvasWidth" :data-height="canvasWidth"></canvas>
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS || H5 -->
+      <canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
+      <!-- #endif -->
+    </view>
+  </view>
+</template>
+
+<script module="animate" lang="renderjs">
+  function Ball({
+    x,
+    y,
+    vx,
+    vy,
+    canvasWidth,
+    canvasHeight,
+    ctx
+  }) {
+    this.canvasWidth = canvasWidth
+    this.canvasHeight = canvasHeight
+    this.ctx = ctx
+    this.x = x
+    this.y = y
+    this.vx = vx
+    this.vy = vy
+    this.radius = 5
+  }
+
+  Ball.prototype.draw = function() {
+    this.ctx.beginPath()
+    this.ctx.fillStyle = '#007AFF'
+    this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
+    this.ctx.closePath()
+    this.ctx.fill()
+  }
+
+  Ball.prototype.move = function() {
+    this.x += this.vx
+    this.y += this.vy
+    // 回到中心
+    // if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
+    // 	getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
+    // 	this.x = this.canvasWidth / 2
+    // 	this.y = this.canvasHeight / 2
+    // }
+
+    // 边框反弹
+    if (this.x < this.radius) {
+      this.vx = Math.abs(this.vx)
+      return
+    }
+    if (this.x > this.canvasWidth - this.radius) {
+      this.vx = -Math.abs(this.vx)
+    }
+    if (this.y < this.radius) {
+      this.vy = Math.abs(this.vy)
+      return
+    }
+    if (this.y > this.canvasWidth - this.radius) {
+      this.vy = -Math.abs(this.vy)
+    }
+  }
+
+  function getDistance(x, y) {
+    return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
+  }
+
+  export default {
+    methods: {
+      start(newVal, oldVal, owner, ins) {
+        let canvasWidth = ins.getDataset().width,
+          canvasHeight = ins.getDataset().height,
+          canvasEle = document.querySelectorAll('.canvas>canvas')[0],
+          ctx = canvasEle.getContext('2d'),
+          speed = 3,
+          ballList = [],
+          layer = 3,
+          ballInlayer = 20
+        for (let i = 0; i < layer; i++) {
+          let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
+          for (let j = 0; j < ballInlayer; j++) {
+            let deg = j * 2 * Math.PI / ballInlayer,
+              sin = Math.sin(deg),
+              cos = Math.cos(deg),
+              x = radius * cos + canvasWidth / 2,
+              y = radius * sin + canvasHeight / 2,
+              vx = speed * cos,
+              vy = speed * sin
+            ballList.push(new Ball({
+              x,
+              y,
+              vx,
+              vy,
+              canvasWidth,
+              canvasHeight,
+              ctx,
+              radius: 5
+            }))
+          }
+        }
+
+        function animate(ballList) {
+          ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
+          ballList.forEach(function(item) {
+            item.move()
+            item.draw()
+          })
+          requestAnimationFrame(function() {
+            animate(ballList)
+          })
+        }
+        animate(ballList)
+      }
+    }
+  }
+</script>
+
+<script>
+  // #ifndef APP-PLUS || H5
+
+  let ctx = null,
+    interval = null;
+
+  function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
+    this.canvasWidth = canvasWidth
+    this.canvasHeight = canvasHeight
+    this.ctx = ctx
+    this.x = x
+    this.y = y
+    this.vx = vx
+    this.vy = vy
+    this.radius = 5
+  }
+
+  Ball.prototype.draw = function () {
+    this.ctx.setFillStyle('#007AFF')
+    this.ctx.beginPath()
+    this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
+    this.ctx.closePath()
+    this.ctx.fill()
+  }
+
+  Ball.prototype.move = function () {
+    this.x += this.vx
+    this.y += this.vy
+    // 回到中心
+    if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
+      getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
+      this.x = this.canvasWidth / 2
+      this.y = this.canvasHeight / 2
+    }
+
+    // 边框反弹
+    if (this.x < this.radius) {
+      this.vx = Math.abs(this.vx)
+      return
+    }
+    if (this.x > this.canvasWidth - this.radius) {
+      this.vx = -Math.abs(this.vx)
+    }
+    if (this.y < this.radius) {
+      this.vy = Math.abs(this.vy)
+      return
+    }
+    if (this.y > this.canvasWidth - this.radius) {
+      this.vy = -Math.abs(this.vy)
+    }
+  }
+
+  function getDistance(x, y) {
+    return 1
+  }
+
+  // #endif
+
+  export default {
+    data() {
+      return {
+        title: 'canvas',
+        canvasWidth: 0,
+        startStatus: false,
+        ballList: []
+      }
+    },
+    onReady: function () {
+      this.$nextTick(() => {
+        uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
+          this.canvasWidth = data.width
+          // #ifdef APP-PLUS || H5
+          this.startStatus = true
+          // #endif
+          // #ifndef APP-PLUS || H5
+          ctx = uni.createCanvasContext('canvas')
+          this.drawBall()
+          // #endif
+        }).exec()
+      })
+    },
+    // #ifndef APP-PLUS || H5
+    onUnload: function () {
+      clearInterval(interval);
+    },
+    methods: {
+      drawBall: function () {
+        let canvasWidth = this.canvasWidth,
+          canvasHeight = this.canvasWidth,
+          speed = 3,
+          ballList = [],
+          layer = 3,
+          ballInlayer = 20
+        for (let i = 0; i < layer; i++) {
+          let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
+          for (let j = 0; j < ballInlayer; j++) {
+            let deg = j * 2 * Math.PI / ballInlayer,
+              sin = Math.sin(deg),
+              cos = Math.cos(deg),
+              x = radius * cos + canvasWidth / 2,
+              y = radius * sin + canvasHeight / 2,
+              vx = speed * cos,
+              vy = speed * sin
+            ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx))
+          }
+        }
+
+        function animate(ballList) {
+          ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+          ballList.forEach(function (item) {
+            item.move()
+            item.draw()
+          })
+          ctx.draw()
+        }
+
+        interval = setInterval(function () {
+          animate(ballList)
+        }, 17)
+      }
+    }
+    // #endif
+  }
+</script>
+
+<style>
+  .page-body-wrapper {
+    text-align: center;
+  }
+
+  .canvas {
+    width: 1024px;
+    min-height: 1024px;
+    background-color: #fff;
+  }
+</style>

pages/tabBar/API.uvue

@@ -135,21 +135,23 @@
             id: 'ui',
             name: '界面',
             pages: [
-              /* {
-                name: "创建动画",
-                url: "animation",
-                enable: false
-              },
+              // {
+              //   name: "创建动画",
+              //   url: "animation",
+              //   enable: false
+              // },
+              // #ifdef WEB
               {
                 name: "创建绘画",
                 url: "canvas",
-                enable: false
-              },
-              {
-                name: "节点布局交互状态",
-                url: "intersection-observer",
-                enable: false
-              }, */
+                enable: true
+              },
+              // #endif
+              // {
+              //   name: "节点布局交互状态",
+              //   url: "intersection-observer",
+              //   enable: false
+              // },
               {
                 name: 'element元素',
                 url: 'get-element-by-id',

pages/tabBar/component.uvue

@@ -208,6 +208,8 @@ export default {
               }
             ] as Page[]
           },
+          */
+         // #ifdef WEB
           {
             id: 'canvas',
             name: '画布',
@@ -217,7 +219,7 @@ export default {
               }
             ] as Page[]
           },
-          */
+          // #endif
         {
           id: 'web-view',
           name: '网页',