Canvas2D 清理画布 clearRect（五）

最新推荐文章于 2024-05-11 10:05:08 发布

前端小云儿

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量439

点赞数 7

分类专栏：前端静态页面以及逻辑文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/jieweiwujie/article/details/135276369

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 12 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

<template>
  <div>
    <h3>Canvas2D 清理画布 clearRect（五）</h3>
    <h3></h3>

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

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    getRefreshCodeFun() {
      //需求，清理画布 clearRect(x,y,w,h);
      //获取cavans对象
      var oCanvas = document.getElementById("canvas");
      if (oCanvas.getContext) {
        //得到2d绘图上下文环境
        var oContext = oCanvas.getContext("2d");
        //更改填充颜色
        oContext.fillStyle = "red";
        //绘制一个填充的矩形
        oContext.fillRect(30, 30, 100, 100);
        //清理画布
        oContext.clearRect(40, 40, 80, 80);
      }
    },
  },

  mounted() {
    this.getRefreshCodeFun();
  },
};
</script>

<style scoped></style>