<template> <view class="zcvs"> <view class="zcvs-item"> <view>Canvas_绘制图像</view> <view> <canvas canvas-id="cvs" id="cvs" style=" 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'); // ctx.setStrokeStyle("#007AFF"); // ctx.setLineWidth(5); let imgSrc = "../../static/pic1.png"; // drawImage(dx, dy) 不缩放 // drawImage(dx, dy, dWidth, dHeight) 控制缩放 // drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 控制缩放,裁剪 ctx.drawImage(imgSrc, 0, 100, 400, 200); ctx.draw(); }, } } </script> <style lang="scss" scoped></style>