公告列表
公告列表
收藏
回答

cavans2d画布画不满容器

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

<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>
回答关注问题邀请回答
收藏

1 个回答

  • Z
    Z
    2021-05-13

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

    2021-05-13
    有用
    回复 1
    • 妖颖诗呀。
      妖颖诗呀。
      2021-11-15
      我这是动态获取父元素的宽高然后设置的，如果直接写死宽高是没有问题的
      2021-11-15
      赞
      回复
请 登录 后发表内容
相关问题
相关文档