<template> <view class="zcvs"> <view class="zcvs-item"> <view>07_圆角</view> <view> <canvas class="zcvs-cvs" canvas-id="cvs" id="cvs" /> </view> </view> </view> </template> <script> export default { data() { return { }; }, onReady() { this.drawCvs(); }, methods: { drawCvs() { const ctx = uni.createCanvasContext('cvs'); ctx.setLineWidth(5); ctx.setStrokeStyle("#007AFF"); ctx.setFillStyle("#4CD964"); // 画 交叉线 ctx.beginPath(); ctx.moveTo(0, 150); ctx.lineTo(300, 150); ctx.stroke(); ctx.beginPath(); ctx.moveTo(150, 0); ctx.lineTo(150, 300); ctx.stroke(); // 画 几个交叉点 及 连线 ctx.beginPath(); ctx.setStrokeStyle("#DD524D"); ctx.setLineWidth(2); ctx.arc(150, 150, 5, 0, 2 * Math.PI); // 中心点 ctx.arc(100, 150, 5, 0, 2 * Math.PI); // 左 ctx.arc(150, 100, 5, 0, 2 * Math.PI); // 上 ctx.arc(200, 150, 5, 0, 2 * Math.PI); // 右 ctx.arc(150, 200, 5, 0, 2 * Math.PI); // 下 ctx.arc(100, 150, 5, 0, 2 * Math.PI); // 左 ctx.stroke(); // arcTo 的用法 控制点 就是两个线的交叉点 ctx.beginPath(); ctx.setLineWidth(5); ctx.setStrokeStyle("#4CD964"); ctx.moveTo(100, 150); ctx.arcTo(150, 150, 150, 100, 50); ctx.arcTo(150, 150, 200, 150, 100); ctx.arcTo(150, 150, 150, 200, 50); ctx.arcTo(150, 150, 100, 150, 50); ctx.stroke(); ctx.draw(); }, } } </script> <style lang="scss" scoped> .zcvs { .zcvs-item { margin-bottom: 20px; } .zcvs-cvs { border: 1px solid #eee; height: 300px; 100%; box-sizing: border-box; } } </style>