type
status
date
slug
summary
tags
category
icon
password
今天是 9 月 30 日...笔者已无心工作，只想为祖国庆生。但话是这么说，摸鱼还是一样要摸的(打工人绝不低头)。笔者前一段时间因为需求而去学习了一下
canvas，今天摸鱼就来稍微做一下总结，都是基础知识，大佬轻喷🙊前言
canvas是HTML5新定义的标签，一般使用javascript绘制图形。使用canvas元素，需要先设置width和height属性，从而规定绘制区域的大小。如果没有设置，是看不到元素的，格式如下：Tips：标签内的信息只有当用户使用的浏览器不支持
canvas元素时才显示正文
现在有了
canvas画布，接下来就是画图了。在canvas画布内画图分以下几步：四步走
- 获取指定的
canvas元素
这应该就不用多说了吧，直接上代码：
- 获取
canvas的上下文环境
通过调用
getContext方法并传入2d参数(暂不支持3d)，即可获得2d上下文对象：- 填充(fillStyle)或描边(strokeStyle)
2d上下文的绘图方式有两种：填充和描边。这两种方法分别为：
fillStyle和strokeStyle- 绘制形状
绘制具体形状
矩形
绘制形状？那我们肯定要先想绘制什么形状😂 笔者先来介绍绘制矩形吧！绘制矩形的相关方法有三个：
fillRect(x, y, width, height)、strokeRect(x, y, width, height)、clearRect(x, y, width, height)。它们分别都接收四个参数：- x：矩形起始点的 x 坐标
- y：矩形起始点的 y 坐标
- width：矩形的宽度
- height：矩形的高度
其中：
fillRect()用于绘制实心矩形(上文提到的填充方式)，strokeRect()则用于绘制空心矩形(上文提到的描边方式)。clearRect()则是清除矩形区域
话不多说，我们先来绘制一下实心矩形和空心矩形：
我们再来看一下
clearRect()清除矩形区域的效果(在实心矩形上演示)
当然，填充和描边可以一起用来绘制矩形，并且绘制的坐标可以不相同，那么最终绘制出来的形状也不尽相同，也可以加上清除矩形方法......这里就要看大家的丰富想象力了。笔者在这里就演示填充和描边的坐标一样的情形吧
圆形和圆弧
上面介绍了如何绘制简单的矩形，但我们也可以绘制路径。先来介绍如何绘制圆形和圆弧。大致分为以下步骤：
beginPath();：开始绘制路径
ctx.arc(x, y, r, sa, ea, c);：绘制圆形或圆弧的方法。参数具体含义为：- (x, y)代表圆心
- r代表半径
- sa代表起始角
- ea代表结束角
- c代表是否为逆时针
closePath();：关闭绘制路径
- 定义圆形或圆弧的样式
- 以填充(fill)或描边(stroke)方式绘制圆形或圆弧
接下来，笔者依次演示圆形和圆弧的绘制。
圆形：分为实心圆和空心圆，代码基本差不多，只是最后的绘制方式不一样
圆弧：代码和圆形基本一致，区别在于：1.
arc()中的结束角需要调整。圆形就是2 * Math.PI，那半圆弧就是Math.PI，依次类推...其实，Math.PI就是数学里的180度(π)；2.是否关闭绘制路径closePath也会影响圆弧的样式。我们直接看具体事例：
线段
介绍完如何绘制圆形和圆弧，接下来我们继续利用路径来绘制线段。步骤和绘制圆形基本一致：
beginPath();：开始绘制路径
ctx.moveTo(0, 50);：把路径开始点移动到指定点(0, 50)
ctx.lineTo(x, y);：从上一点绘制一条直线到(x, y)
- 定义线段样式
- 以描边(stroke)方式绘制线段
直接上代码和效果图
当然，存在多个
lineTo()也是可以的，比如：
如果是这样，那我们通过绘制线条可以很简单的画出矩形、六边形等规则图形😎 读者可自行发挥一番
结语
canvas有很多的知识和实践。比如绘制文字、图像绘制、阴影、绘制钟表等等。笔者也是刚刚入门canvas，慢慢学习！- 作者:Leeson
- 链接: /article/canvas
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。