Canvas2D 画矩形rect方法绘制矩形rect(x,y,w,h)（三）

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

前端小云儿

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

阅读量363

点赞数 7

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

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

版权

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

117 篇文章 17 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细探讨了Canvas2D API中的rect方法，用于在画布上绘制矩形。通过rect(x, y, w, h)，我们可以指定矩形的起点坐标(x, y)和宽高(w, h)，实现灵活的矩形绘制。了解这个方法对于前端开发者在创建动态图形和用户界面时至关重要。" 120620773,7976685,复现VQGAN-CLIP：从代码到GPU加速,"['深度学习', '图像生成', '自然语言处理', 'PyTorch', 'GitHub']

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

<template>
  <div>
    <h3>Canvas2D 画矩形rect方法绘制矩形rect(x,y,w,h)（三）</h3>
    <h3>
      填充矩形
      在Canvas中，我们可以使用fillStyle属性和fillRect()方法配合使用来画一个填充矩形。
      2D对象.fillStyle=属性值; 2D对象.fillRect(x, y, width, height);
      说明：fillStyle属性跟strokeStyle属性一样。
      fillStyle属性也必须在fillRect()方法之前定义，否则fillStyle属性无效。
    </h3>

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

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    getRefreshCodeFun() {
      //需求使用rect方法绘制矩形rect(x,y,w,h),一定要配合stroke()方法进行描边矩形的绘制
      //获取canvas对象
      var oCanvas = document.getElementById("canvas");
      if (oCanvas.getContext) {
        //得到2d绘图上下文环境
        var oContext = oCanvas.getContext("2d");
        //绘制矩形
        oContext.rect(30, 30, 50, 60);
        //描边绘制
        oContext.stroke();
      }
    },
  },

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

<style scoped></style>