vue中一个canvas组件如何做到让他自适应div

Question

  我做了一个canvas组件，想让他自适应其对应的div，但是我修改了data之后没办法渲染出来，也没办法让canvas按照div的宽改变它的宽，请问这怎么解决：

canvas组件代码:

<template>
  <div>
    <canvas :id="id" :width="width" :height="height"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    id: String,
    width: Number,
    height: Number,
    textContent: String,
    textColor: String,
    textSize: String
  },
  mounted() {
    this.renderTitle();
  },
  methods: {
    renderTitle() {
      let c = document.getElementById(this.id);
      let ctx = c.getContext("2d");

      let my_gradient = ctx.createLinearGradient(0, 0, this.width, 0);
      my_gradient.addColorStop(0, "#142640");
      my_gradient.addColorStop(0.5, "#1f395f");
      my_gradient.addColorStop(1, "#142640");
      ctx.fillStyle = my_gradient;
      ctx.fillRect(0, 0, this.width, this.height);

      ctx.font = this.textSize;
      ctx.fillStyle = this.textColor;
      ctx.textAlign = "center";
      ctx.fillText(this.textContent, this.width / 2, this.height / 2 + 6);
    }
  }
};
</script>

div的代码：

<template>
  <div class="RightTop" ref="RightTop" style="width: 100%;height: 280px;">
    <titleName
      id="RightTopTitle"
      :width="width"
      :height="height"
      :textContent="textContent"
      :textColor="textColor"
      :textSize="textSize"
    ></titleName>
  </div>
</template>

<script>
import titleName from "@/components/titleName.vue";

export default {
  name: "ASKs.vue",
  data() {
    return {
      width: 600,
      height: 48,
      textContent: "前后12小时运能分析",
      textColor: "#34ffff",
      textSize: "16px Georgia"
    };
  },
  components: { titleName },
  mounted() {
    this.kuangao();
  },

  methods: {
    kuangao(){
      this.width=800//能改，但是渲染不出来
      console.log(this.width)
    }
  }
}
</script>
<style scoped>
.RightTop {
  /*   width: 100%;
  height: 280px; */
  margin-bottom: 20px;
  border: 2px #336699 dotted;
}
</style>

应该怎么做才能让canvas不仅能渲染出来还能自适应div宽高呢？

Answer 1

canvas在使用的时候，好像是必须要设定确定的width和height，不然没办法渲染。

如果是要适配，就要变量来控制宽高

canvas宽高变动后，都会清空画布，需要重新渲染

Answer 2

div里面的用弹性盒子试试

Answer 3

之前在微信小程序遇到过，canvas只能填写px，要做的就是把rem转px即可

Answer 4

1. 缩放：宽realWidth = canvasWidth/divWidth > canvasHeight/divHeight ? canvasWidth canvasWidth/divWidth : canvas canvasHeight/divHeight. 高同。
2. 居中：利用CSS3transform属性做translate转换。

Answer 5

canvas必须固定高度.你看看你的div是能拖动大小吗,还有会随窗口大小变换么 在变化的时候重新渲染canvas 就是清空画布再画一次 随窗口变就监听resize事件 有拖动变就拖动的时候重新渲染 ,如果很频繁就做个节流防抖啥的

Answer 6

不建议动态设置canvas宽高，动态设置宽高，之前的宽高和之后的宽高不一样的话绘制会发生变形

Answer 7

我用自定义指令监听父元素的宽高，父元素的宽高给百分比，绘制之前自动将父元素的宽高赋值给canvas，这样是可以，但是只有首次，我窗口再次发生变化，canvas绘制的就不见了，我console.log其实已经重绘了，但是就是没有图形，我觉得人生一片灰暗！！！