<template> <view class="zcvs"> <canvas canvas-id="cvs" id="cvs" :style="setCanvasStyle" /> </view> </template> <script> export default { data() { return {}; }, onReady() { this.drawCvs(); }, computed: { setCanvasStyle() { let retStyle = "background: #000;"; const info = uni.getSystemInfoSync(); retStyle += "" + info.windowWidth + "px;"; retStyle += "height:" + info.windowHeight + "px;"; return retStyle; } }, methods: { drawCvs() { const ctx = uni.createCanvasContext('cvs'); const info = uni.getSystemInfoSync(); const canvas = { info.windowWidth, height: info.windowHeight }; let [dX, dY, sX, sY, speed] = [true, true, 0, 0, 2]; var animate = (sx, sy) => { ctx.fillRect(sx, sy, 20, 20); ctx.stroke(); ctx.draw(); }; var start = () => { ctx.setFillStyle("#d6b816"); ctx.setStrokeStyle("#007AFF"); ctx.setLineWidth(10); if (dX && dY) { sX < canvas.width - 20 ? sX += speed : dX = false sY < canvas.height - 20 ? sY += speed : dY = false } else if (!dX && dY) { sX > 0 ? sX -= speed : dX = true sY < canvas.height - 20 ? sY += speed : dY = false } else if (dX && !dY) { sX < canvas.width - 20 ? sX += speed : dX = false sY > 0 ? sY -= speed : dY = true } else if (!dX && !dY) { sX > 0 ? sX -= speed : dX = true sY > 0 ? sY -= speed : dY = true } animate(sX, sY); window.requestAnimationFrame(start); }; start(); } } } </script> <style lang="scss" scoped> .zcvs { flex: 1; background: "#000"; } </style>