Canvas 基础~~~

Leeson
323 阅读5分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

笔者前一段时间因为需求而去学习了一下canvas，今天摸鱼就来稍微做一下总结，都是基础知识，大佬轻喷🙊

前言

canvas是HTML5新定义的标签，一般使用javascript绘制图形。使用canvas元素，需要先设置width和height属性，从而规定绘制区域的大小。如果没有设置，是看不到元素的，格式如下：

<canvas id="canvas" width="200" height="200">sorry~暂不支持canvas元素</canvas>

tips：标签内的信息只有当用户使用的浏览器不支持canvas元素时才显示

正文

现在有了canvas画布，接下来就是画图了。在canvas画布内画图分以下几步：

四步走

  1. 获取指定的canvas元素

这应该就不用多说了吧，直接上代码：

const canvas = document.getElementById('canvas');
  1. 获取canvas的上下文环境

通过调用getContext方法并传入2d参数(暂不支持3d)，即可获得2d上下文对象：

const ctx = canvas.getContext('2d');
  1. 填充(fillStyle)或描边(strokeStyle)

2d上下文的绘图方式有两种：填充和描边。这两种方法分别为：fillStyle和strokeStyle

ctx.fillStyle = '#409eff'; //填充的样式
ctx.strokeStyle = 'black'; // 描边的样式
ctx.lineWidth = 2; //描边线的宽度
  1. 绘制形状

绘制具体形状

矩形

绘制形状？那我们肯定要先想绘制什么形状😂 笔者先来介绍绘制矩形吧！绘制矩形的相关方法有三个：fillRect(x, y, width, height)、strokeRect(x, y, width, height)、clearRect(x, y, width, height)。它们分别都接收四个参数：

  • x：矩形起始点的 x 坐标
  • y：矩形起始点的 y 坐标
  • width：矩形的宽度
  • height：矩形的高度

其中：fillRect()用于绘制实心矩形(上文提到的填充方式)，strokeRect()则用于绘制空心矩形(上文提到的描边方式)。clearRect()则是清除矩形区域

话不多说，我们先来绘制一下实心矩形和空心矩形：

// 实心矩形
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#409eff';
ctx.fillRect(10, 10, 100, 100);

// 空心矩形
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.lineWidth = 2; //描边线的宽度
ctx.strokeRect(10, 10, 100, 100);

我们再来看一下clearRect()清除矩形区域的效果(在实心矩形上演示)

// 实心矩形
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#409eff';
ctx.fillRect(10, 10, 100, 100);
// 清除矩形
ctx.clearRect(50, 50, 50, 50);

当然，填充和描边可以一起用来绘制矩形，并且绘制的坐标可以不相同，那么最终绘制出来的形状也不尽相同，也可以加上清除矩形方法......这里就要看大家的丰富想象力了。笔者在这里就演示填充和描边的坐标一样的情形吧

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#409eff';
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.strokeRect(10, 10, 100, 100);
ctx.fillRect(10, 10, 100, 100);

圆形和圆弧

上面介绍了如何绘制简单的矩形，但我们也可以绘制路径。先来介绍如何绘制圆形和圆弧。大致分为以下步骤：

  1. beginPath();：开始绘制路径
  2. ctx.arc(x, y, r, sa, ea, c);：绘制圆形或圆弧的方法。参数具体含义为：
  • (x, y)代表圆心
  • r代表半径
  • sa代表其实角
  • ea代表结束角
  • c代表是否为逆时针
  1. closePath();：关闭绘制路径
  2. 定义圆形或圆弧的样式
  3. 以填充(fill)或描边(stroke)方式绘制圆形或圆弧

接下来，笔者依次演示圆形和圆弧的绘制。
圆形：分为实心圆和空心圆，代码基本差不多，只是最后的绘制方式不一样

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.closePath();

ctx.fillStyle = '#409eff'; //填充样式
ctx.strokeStyle = '#409eff'; //描边样式
ctx.fill(); //以填充方式绘制圆形(实心圆)
ctx.stroke(); //以描边方式绘制圆形(空心圆)

圆弧：代码和圆形基本一致，区别在于：1.arc()中的结束角需要调整。圆形就是2 * Math.PI，那半圆弧就是Math.PI，依次类推...其实，Math.PI就是数学里的180度(π)；2.是否关闭绘制路径closePath也会影响圆弧的样式。我们直接看具体事例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
// 逆时针绘制的半圆弧
ctx.arc(100, 100, 50, 0, Math.PI, true);
ctx.closePath(); //注意区分是否关闭绘制路径

ctx.strokeStyle = '#409eff';
ctx.stroke();

线段

介绍完如何绘制圆形和圆弧，接下来我们继续利用路径来绘制线段。步骤和绘制圆形基本一致：

  1. beginPath();：开始绘制路径
  2. ctx.moveTo(0, 50);：把路径开始点移动到指定点(0, 50)
  3. ctx.lineTo(x, y);：从上一点绘制一条直线到(x, y)
  4. 定义线段样式
  5. 以描边(stroke)方式绘制线段

直接上代码和效果图

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.closePath();

ctx.strokeStyle = '#409eff';
ctx.stroke();

当然，存在多个lineTo()也是可以的，比如：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.lineTo(200, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(0, 200);
ctx.closePath();

ctx.strokeStyle = '#409eff';
ctx.stroke();

如果是这样，那我们通过绘制线条可以很简单的画出矩形、六边形等规则图形😎 读者可自行发挥一番

结语

canvas有很多的知识和实践。比如绘制文字、图像绘制、阴影、绘制钟表等等。笔者也是刚刚入门canvas，慢慢学习！之后再回来续杯🍺

avatar
文章
阅读
粉丝