JS canvas画布的基础知识点和操作方式

canvas的介绍说明

JavaScript中的画布是通过HTML5提供的<canvas>元素来创建和操作的。以下是关于画布的基础知识点和操作方式。

1. 创建画布: 通过JavaScript代码在HTML文档中创建一个画布元素。

   var canvas = document.createElement('canvas');
   

2. 设置画布尺寸: 使用width和height属性设置画布的宽度和高度。

   canvas.width = 500;
   canvas.height = 300;
   

3. 获取绘图上下文: 获取画布的2d上下文对象，用于进行绘制操作。

   var ctx = canvas.getContext('2d');
   

4. 绘制形状: 通过绘图上下文对象的方法绘制各种形状，如矩形、圆形、线条等。

   // 绘制矩形
   ctx.fillRect(x, y, width, height);
   
   // 绘制圆形
   ctx.arc(x, y, radius, startAngle, endAngle);
   
   // 绘制线条
   ctx.moveTo(x1, y1);
   ctx.lineTo(x2, y2);
   ctx.stroke();
   

5. 绘制文本: 使用绘图上下文对象的方法绘制文本。