当前位置：我爱小程序 > 问题解答 > 开发者工具 > 正文

cavans2d画布画不满容器

2021-05-13 分类：开发者工具评论(0)

框架类型	问题类型	操作系统	工具版本
小程序	Bug	Windows	1.05.2103200

1.05.2103200
代码片段<template> <view> <view class="cavans_father" style="width: 564

代码片段

<template> <view> <view class="cavans_father" style="width: 564rpx;height: 284rpx;"> <canvas type="2d" :style="'position:absolute;z-index:9;width:'+width+'px;height:'+height+'px;'" id="myCanvas" canvas-id="myCanvas"></canvas> <view class="cavans_bg_text"> cavans_bg_text </view> </view> <view class="scratch-card1" style="width: 564rpx;height: 284rpx;margin: auto;margin-top: 40rpx;background-color: #DD524D;"> <view class="cavans_bg_text"> cavans_bg_text </view> <canvas id="scratch-card1" type='2d' :style="'width:'+ width1+'px;height :'+ height1+'px;position:absolute;z-index:9;'" canvas-id="scratch-card1"> </canvas> </view> </view> </template> <script> export default { data() { return { width: 0, height: 0, width1: 0, height1: 0 } }, onLoad() { const wxquery = wx.createSelectorQuery().in(this) wxquery.select('#myCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') // 获取设备像素比调整画布尺寸，并缩放坐标系 // 获取设备像素比调整画布尺寸，并缩放坐标系 const query = wx.createSelectorQuery().in(this); query.select('.cavans_bg_text').boundingClientRect(data => { this.width = data.width this.height = data.height ctx.clearRect(0, 0, this.width, this.height); //绘制画布 ctx.fillStyle = '#F0AD4E' ctx.fillRect(0, 0, this.width, this.height); }).exec(); }) const wxquery1 = wx.createSelectorQuery().in(this) wxquery1.select('#scratch-card1').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') // 获取设备像素比调整画布尺寸，并缩放坐标系 // 获取设备像素比调整画布尺寸，并缩放坐标系 const query = wx.createSelectorQuery().in(this); query.select('.scratch-card1').boundingClientRect(data => { this.width1 = data.width this.height1 = data.height ctx.clearRect(0, 0, this.width1, this.height1); //绘制画布 ctx.fillStyle = '#F0AD4E' ctx.fillRect(0, 0, this.width1, this.height1); }).exec(); }) }, methods: { } } </script> <style lang="scss"> page { margin: 0; padding: 0; } .cavans_father { margin: auto; background-color: #ffaaff; position: relative; .cavan-content { width: 494rpx; height: 264rpx; } #myCanvas {} } .cavans_bg_text { width: 564rpx; height: 292rpx; margin: auto; position: absolute; top: 0; left: 50%; margin-left: -247rpx; } </style>

网友回复

Z：

虽然不知道你用的什么框架但是感觉写的有问题我在小程序里面把你的改了改可以参考看一下应该是你设置canvas 的宽高没有设置成功https://developers.weixin.qq.com/s/9rLMOgmx7Xqf

评论抢沙发

真正的个人免签约支付接口

云免签 H5支付