Canvas 基础

Canvas 概述

Canvas 简介、元素、对象

Canvas 简介

Canvas，又称“画布”，HTML5中新增的元素，结合 JavaScript 来绘制各种图形的技术。

Canvas 元素

Canvas 是一个行内块元素(inline-block)，一般指定id，width，height 三个属性。Canvas 元素的默认宽度300px，高度150px。

Canvas 元素的宽高一定要在HTML属性中定义，否则通过 JavaScript 只能获取到默认宽高。

Canvas 对象

在 JavaScript 中，我们常使用 document.getElementById() 来获取 Canvas 对象，我们使用 getContext("2d") 来获取Canvas 2D 上下文环境对象，称为 context 对象。

<canvas data-v-54d31051="" class="canvas-container" width="200" height="100"></canvas>

const main = () => {
  // 普通js 中 使用 document.getElementById()
  const cvs = canvasEl.value;
  console.log(`Canvas 的宽为：${ cvs.width }, 高为：${ cvs.height }`); // 300 150(默认)

  cvs.width = 200;
  cvs.height = 100;
  console.log(`Canvas 的宽为：${ cvs.width }, 高为：${ cvs.height }`); // 200 100(设置)

  const context = cvs.getContext('2d');
  dataURL.value = cvs.toDataURL('image/png');
  console.log(context); // CanvasRenderingContext2D
}