canvas 画布

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1

  1. <view class="canvas-view">    <canvas         canvas-id="myCanvas"         disable-scroll="false"         class="canvas"         width="610"        height="610">    </canvas></view>
  1. Page({    data: {},    onReady() {        this.point = {            x: Math.random() * 305,            y: Math.random() * 305,            dx: Math.random() * 10,            dy: Math.random() * 10,            r: Math.round(Math.random() * 255 | 0),            g: Math.round(Math.random() * 255 | 0),            b: Math.round(Math.random() * 255 | 0)        };        this.interval = setInterval(this.draw.bind(this), 17);        // 使用 swan.createContext 获取绘图上下文 context        this.ctx = swan.createCanvasContext('myCanvas');    },    draw() {        const { ctx } = this;        ctx.setFillStyle('#FFF');        ctx.fillRect(0, 0, 610, 610);        ctx.beginPath();        ctx.arc(this.point.x, this.point.y, 14, 0, 2 * Math.PI);        ctx.setFillStyle('rgb(' + this.point.r + ', ' + this.point.g + ', ' + this.point.b + ')');        ctx.fill();        ctx.draw();        this.point.x += this.point.dx;        this.point.y += this.point.dy;        if (this.point.x <= 10 || this.point.x >= 305) {            this.point.dx = -this.point.dx;            this.point.r = Math.round(Math.random() * 255 | 0);            this.point.g = Math.round(Math.random() * 255 | 0);            this.point.b = Math.round(Math.random() * 255 | 0);        }        if (this.point.y <= 10 || this.point.y >= 305) {            this.point.dy = -this.point.dy;            this.point.r = Math.round(Math.random() * 255 | 0);            this.point.g = Math.round(Math.random() * 255 | 0);            this.point.b = Math.round(Math.random() * 255 | 0);        }    }});
  1. .canvas-view {  display: flex;  justify-content: center;  background-color: rgba(235, 229, 229, 0.5);}.canvas {  width: 610rpx;  height: 610rpx;  background-color: #fff;}

代码示例2

在开发者工具中预览效果

  1. <view class="wrap">    <view class="circlePostion">        <canvas class="circle" canvas-id="mycanvas"></canvas>        <view class="centerText">{{resultComment}}</view>    </view></view>
  1. Page({    data: {        timer: ''    },    onLoad() {        let totalItems = 100;        let rightItems = 80;        let completePercent = parseInt((rightItems / totalItems) * 100);        this.getResultComment(completePercent);        this.showScoreAnimation(rightItems, totalItems);    },    showScoreAnimation(rightItems, totalItems) {        let that = this;        let copyRightItems = 0;        that.setData({            timer: setInterval(function () {                copyRightItems++;                if (copyRightItems == rightItems) {                    clearInterval(that.data.timer)                } else {                    // 灰色底层                    let ctx = swan.createCanvasContext('mycanvas');                    ctx.setLineWidth(6);                    ctx.setStrokeStyle('#DCDCDC');                    ctx.setLineCap('round');                    ctx.beginPath();                    ctx.arc(53, 53, 50, 0, 2 * Math.PI, false);                    ctx.stroke();                    ctx.setLineWidth(6);                    ctx.setStrokeStyle('#38f');                    ctx.setLineCap('round')                    ctx.beginPath();                    ctx.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);                    ctx.stroke();                    ctx.draw();                }            }, 20)        })    },  getResultComment(completePercent) {    let that = this;    switch (true) {        case completePercent < 60:            that.setData({                resultComment: "不及格"            })        break;        case completePercent >= 60 && completePercent <= 80:            that.setData({                resultComment: "中等"            })        break;        case completePercent >= 80 && completePercent < 90:            that.setData({                resultComment: "良好"            })        break;        case completePercent >= 90 && completePercent < 100:            that.setData({                resultComment: "优秀"            })         }    },})

Bug & Tip

  • -