// index.js
Page({
? ? data:{
? ? ? cx:200,
? ? ? cy:50,
? ? ? destinaX:3,
? ? ? destinaY:2
? ? },
? ? //初次渲染觸發(fā)
? ? onReady:function(){
? ? ? var c=wx.createCanvasContext("canvasTest");
? ? ? // var c=wx.createSelectorQuery('canvasTest')
? ? ? var that=this;
? ? ? var timer=setInterval(canvasSize,20);
? ? ? function canvasSize(){
? ? ? ? //畫布數(shù)據(jù)
? ? ? ? const width=300;
? ? ? ? const height=300;
? ? ? ? const speed=2;
? ? ? ? const r=7;
? ? ? ? //下面是相對左上角基點距離 和畫布大小
? ? ? ? c.rect(0,0,width,height);
? ? ? ? c.stroke();
? ? ? ? //球會根據(jù)實時位置發(fā)生變化
? ? ? ? c.beginPath();
? ? ? ? var ox1=that.datacox;
? ? ? ? var oy1=that.datacoy;
? ? ? ? ? ox1=that.data.destinaX*speed+that.data.cx;
? ? ? ? ? oy1=that.data.cy-that.data.destinaY*speed;
? ? ? ? ? if(ox1>=width||ox1<=0){
? ? ? ? ? ? var bounceX=-that.data.destinaX;
? ? ? ? ? ? that.setData({destinaX:bounceX});
? ? ? ? ? ? ox1=that.data.destinaX*speed+that.data.cx;
? ? ? ? ? }
? ? ? ? ? if(oy1>=height||oy1<=0){
? ? ? ? ? ? var bounceY=-that.data.destinaY;
? ? ? ? ? ? that.setData({destinaY:bounceY});
? ? ? ? ? ? oy1=that.data.cy-that.data.destinaY*speed;
? ? ? ? ? }
?
? ? ?console.log(that.data.ox1,that.data.oy1);
? ? ? ? that.setData({cx:ox1,cy:oy1});
? ? ? ? c.arc(that.data.cx,that.data.cy,r,0,2*Math.PI);
? ? ? ? c.fill();
? ? ? ? c.stroke();
? ? ? ? c.draw();
? ? ? }
? ? }
? })

<!--index.wxml-->
<view class="canvasStyle">
<canvas canvas-id="canvasTest" style="width: 300px;height: 300px;"></canvas>?
</view>

/**index.wxss**/
.canvasStyle{
? display: flex;
? justify-content: center;
? margin: 10px;
? margin-top: 70px;
? background-color: aqua;
? }