Canvas2D点击清理按钮，清空所画内容 clearRect(x,y,w,h)(六)

最新推荐文章于 2024-03-26 15:37:50 发布

前端小云儿

最新推荐文章于 2024-03-26 15:37:50 发布

阅读量490

点赞数 7

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

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

版权

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

117 篇文章 17 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细介绍了如何在JavaScript的Canvas2D上下文中使用clearRect(x, y, w, h)方法来清空画布上特定区域的内容。通过设置矩形坐标和尺寸，可以有效地清除画布上的画笔痕迹，实现点击‘清理’按钮后的画布复原效果。" 75517824,7028029,"MySQL SQL注入详解：updatexml(), extractvalue()等函数利用

摘要由CSDN通过智能技术生成

<template>
  <div>
    <h3>Canvas2D点击清理按钮，清空所画内容 clearRect(x,y,w,h)(六)</h3>
    <h3><el-button @click="click">清画布</el-button></h3>
    <canvas id="canvas" width="600" height="600"></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