codecamp

canvas

画布。

属性名类型默认值说明
canvas-idStringN/Acanvas 组件的标识,必须设置该属性
canvas组件的默认宽度为 300px,高度为 225px.


示例

<canvas canvas-id="canvas" class="canvas"></canvas>
Page({
  onShow: function(res) {
    this.position = {
      x: 150,
      y: 150,
      vx: 2,
      vy: 2
    };
    this.interval = setInterval(this.drawBall, 17);
  },
  drawBall: function() {
    var p = this.position;
    p.x += p.vx;
    p.y += p.vy;
    if (p.x >= 300) {
      p.vx = -2;
    }
    if (p.x <= 7) {
      p.vx = 2;
    }
    if (p.y >= 300) {
      p.vy = -2;
    }
    if (p.y <= 7) {
      p.vy = 2;
    }

    var context = tt.createCanvasContext("canvas");

    function ball(x, y) {
      context.beginPath(0);
      context.arc(x, y, 5, 0, Math.PI * 2);
      context.setFillStyle("#1aad19");
      context.fill();
      context.stroke();
    }

    ball(p.x, 150);
    ball(150, p.y);
    ball(300 - p.x, 150);
    ball(150, 300 - p.y);
    ball(p.x, p.y);
    ball(300 - p.x, 300 - p.y);
    ball(p.x, 300 - p.y);
    ball(300 - p.x, p.y);

    console.log("will call context.draw");
    context.draw();
  },
  onUnload: function() {
    clearInterval(this.interval);
  }
});
相关 api: tt.createCanvasContext
live-player
web-view
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

字节跳动小程序 介绍

字节跳动小程序 开发

字节跳动小程序开发框架

字节跳动小程序开发框架基础说明

字节跳动小程序开发框架基础功能

字节跳动小程序开发框架逻辑层

无标题文章

无标题目录

API

无标题文章

无标题文章

无标题文章

无标题文章

无标题文章

无标题目录

无标题目录

无标题文章

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }