canvas-直线图形

在 Canvas 中,基本图形有两种:① 直线图形;② 曲线图形。Canvas 常见的直线图形有三种,分另是直线、矩形、多边形。

Canvas 坐标系

在学习 Canvas 之前,我们先来介绍一下 Canvas 中的坐标系是如何使用的。了解 Canvas 使用的坐标系是学习 Canvas 的最基本的前提。

我们经常见到的坐标系是数学坐标系,而 Canvas 使用的坐标系是 W3C 坐标系,这两种坐标系唯一的区别在于 y 轴正方向的不同。
(1)数学坐标系:y 轴正方向向上。
(2)W3C 坐标系:y 轴正方向向下。

注意:W3C 坐标系的 y 轴正方向是向下的。很多小伙伴学到后面对 Canvas 一些代码感到很困惑,那是因为他们没有清楚地意识到这一点。
数学坐标系一般用于数学形式上的应用,而在前端开发中几乎所有涉及坐标系的技术使用的都是 W3C 坐标系,这些技术包括 CSS3、Canvas、SVG 等。了解这一点,我们以后在学习 CSS3 或者 SVG 的时候,很多知识就可以串起来了。数字坐标系和 w3c 坐标系如图所示。

渲染上下文 Context

  • canvas元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式;比如,WebGL使用了基于OpenGLES的3D上下文 (“experimental-webgl”) 。
    canvas 起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。canvas元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。对于 2D 图像而言,如本教程,你可以使用 CanvasRenderingContext2D。
1
<canvas id="canvas" width="150" height="150"> </canvas>
1
2
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

代码的第一行通过使用 document.getElementById() 方法来为canvas元素得到 DOM 对象。一旦有了元素对象,你可以通过使用它的 getContext() 方法来访问绘画上下文。

配置 canvas-sketch

1
2
npm install canvas-sketch-cli --global
canvas-sketch sketch --new --open

执行命令之后就会看到本地起了一个 node 的服务,打开 sketch.js 会看到以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const canvasSketch = require("canvas-sketch");

const settings = {
dimensions: [500, 500] //改为 500,500 为画布的大小
};

const sketch = () => {
return ({ context, width, height }) => {
context.fillStyle = "white";
context.fillRect(0, 0, width, height);
};
};

canvasSketch(sketch, settings);

画一条线

1
2
3
4
5
6
7
8
9
const sketch = () => {
return ({ context, width, height }) => {
const ctx = context;
ctx.strokeStyle = "#AA394C";
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.stroke();
};
};

移动画笔(moveTo())

之前我们获得了画笔 ctx,所以以此为例,给出该方法的使用实例——ctx.moveTo(100,100)。这句代码的意思是 移动画笔至(100,100)这个点(单位是 px)。记住,这里是以 canvas 画布的左上角为笛卡尔坐标系的原点,且 y 轴的正方向向下,x 轴的正方向向右。

笔画停点(lineTo())

同理,ctx.lineTo(200,100)。这句的意思是从 上一笔的停止点 绘制到(600,600)这里。不过要清楚,这里的 moveTo()lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!

选择画笔

这里我们暂且只设置一下画笔的颜色和粗细。
ctx.strokeStyle = “#AA394C”,这句话的意思是设置画笔(线条)的颜色为玫红色。因为 Canvas 是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。

画多条线

1
2
3
4
5
6
7
8
9
10
11
const sketch = () => {
return ({ context, width, height }) => {
const ctx = context;
ctx.strokeStyle = "#AA394C";
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.stroke();
};
};

画一个三角形

1
2
3
4
5
6
7
8
9
10
11
const sketch = () => {
return ({ context, width, height }) => {
const ctx = context;
ctx.strokeStyle = "#AA394C";
ctx.moveTo(100, 100);
ctx.lineTo(150, 200);
ctx.lineTo(200, 100);
ctx.lineTo(100, 100);
ctx.stroke();
};
};

画一个矩形

1
2
3
4
5
6
7
8
9
10
11
12
const sketch = () => {
return ({ context, width, height }) => {
const ctx = context;
ctx.strokeStyle = "#AA394C";
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.lineTo(100, 100);
ctx.stroke();
};
};

分析: 这里使用了moveTo()和lineTo()方法话了一个矩形。在画矩形之前,我们也需要事先确定矩形四个顶点坐标的,这几个坐标是需要计算出来的。
其实在canvas实际开发中,对于三角形和多边形,我们都是用moveTo()和lineTo()来实现,但是对于矩形,有现成的api来实现。strokeRect()和fillRect()。fill代表填充。

  • ctx.strokeRect(x, y, width, height);
    1
    2
    3
    4
    5
    6
    7
    const sketch = () => {
    return ({ context, width, height }) => {
    const ctx = context;
    ctx.strokeStyle = "#AA394C";
    ctx.strokeRect(100, 100,150,100);
    };
    };


1
2
3
4
5
6
7
8
9
const sketch = () => {
return ({ context, width, height }) => {
const ctx = context;
ctx.strokeStyle = "#AA394C";
ctx.strokeRect(80, 80,150,100);
ctx.fillStyle = "#ddc74C";
ctx.fillRect(100, 100,150,100);
};
};