<template> <view class="zcvs"> <view class="zcvs-item"> <view>03_二次曲线</view> <view> <canvas class="zcvs-cvs" canvas-id="cvs" id="cvs" /> </view> </view> </view> </template> <script> export default { data() { return { }; }, onReady() { this.drawCvs(); }, methods: { // 03_二次曲线 drawCvs() { const ctx = uni.createCanvasContext('cvs'); ctx.setLineWidth(15); ctx.setLineCap("round"); ctx.beginPath(); ctx.moveTo(50, 150); ctx.quadraticCurveTo(175, 0, 300, 150); ctx.setStrokeStyle("#007AFF"); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 150); ctx.quadraticCurveTo(175, -100, 300, 150); ctx.setStrokeStyle("#4CD964"); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 150); ctx.quadraticCurveTo(175, 300, 300, 150); ctx.setStrokeStyle("#DD524D"); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 150); ctx.quadraticCurveTo(15, -130, 300, 150); ctx.setStrokeStyle("#F0AD4E"); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 150); ctx.quadraticCurveTo(335, -130, 300, 150); ctx.setStrokeStyle("#F0AD4E"); ctx.stroke(); ctx.beginPath(); ctx.setLineWidth(5); ctx.moveTo(135, 150); ctx.quadraticCurveTo(145, 120, 155, 150); ctx.setStrokeStyle("#F0AD4E"); ctx.stroke(); ctx.beginPath(); ctx.setLineWidth(5); ctx.moveTo(195, 150); ctx.quadraticCurveTo(205, 120, 215, 150); ctx.setStrokeStyle("#F0AD4E"); ctx.stroke(); ctx.beginPath(); ctx.setLineWidth(5); ctx.setLineCap("round"); ctx.moveTo(155, 180); ctx.quadraticCurveTo(175, 220, 195, 180); ctx.setStrokeStyle("#F0AD4E"); ctx.stroke(); ctx.draw(); }, drawCvsn() { const ctx = uni.createCanvasContext('cvsn'); }, } } </script> <style lang="scss" scoped> .zcvs { .zcvs-item { border: 1upx solid #eee; margin-bottom: 40upx; } .zcvs-cvs { border: 1px solid #007AFF; height: 500upx; 100%; box-sizing: border-box; } } </style>