<template> <view class="zcvs"> <view class="zcvs-item"> <view>椭圆</view> <view> <canvas canvas-id="cvs" id="cvs" style="width: 400px; height: 400px;border: 1px solid #007AFF;" /> </view> </view> </view> </template> <script> export default { data() { return { }; }, onReady() { this.drawCvs(); }, methods: { drawCvs() { const ctx = uni.createCanvasContext('cvs'); const centX = 0; const centY = 0; const cWidth = 400; const cHeight = 400; const radius = 50; ctx.save(); // 保存状态1 ctx.translate(cWidth / 2, cHeight / 2); // 移动原点 ctx.scale(2, 1); // 水平放大 ctx.beginPath(); // 缩放之后画圆 ctx.arc(centX, centY, radius, 0, 2 * Math.PI, false); ctx.setFillStyle("#007AFF"); ctx.fill(); ctx.restore(); // 还原 ctx.arc(centX, centY, radius, 0, 2 * Math.PI, false); ctx.fill(); ctx.draw(); }, } } </script> <style lang="scss" scoped> </style>