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()
则是清除矩形区域
话不多说,我们先来绘制一下实心矩形和空心矩形:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5e951bb8-85a5-49f7-8bfe-eeba40be1e54%2FfillRect.png?table=block&id=88723175-4107-423f-845d-828e6dee7130&t=88723175-4107-423f-845d-828e6dee7130&width=702&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4bb3dd8a-3150-45c7-9019-ba75a44fd236%2FstrokeRect.png?table=block&id=99ab1055-db2e-4d29-9e2a-a5c40997d465&t=99ab1055-db2e-4d29-9e2a-a5c40997d465&width=708&cache=v2)
我们再来看一下
clearRect()
清除矩形区域的效果(在实心矩形上演示)![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F79d54640-f58a-41b8-a9ad-c008c50c34b0%2FclearRect.png?table=block&id=69df4c6a-3ab2-4796-833a-cabbb8e2a4dc&t=69df4c6a-3ab2-4796-833a-cabbb8e2a4dc&width=698&cache=v2)
当然,填充和描边可以一起用来绘制矩形,并且绘制的坐标可以不相同,那么最终绘制出来的形状也不尽相同,也可以加上清除矩形方法......这里就要看大家的丰富想象力了。笔者在这里就演示填充和描边的坐标一样的情形吧
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa29ff9e6-ab59-49e7-99e8-39a668d3f9ce%2FsameRect.png?table=block&id=3318f796-b884-4bd1-b142-0ccf3c44ba9a&t=3318f796-b884-4bd1-b142-0ccf3c44ba9a&width=708&cache=v2)
圆形和圆弧
上面介绍了如何绘制简单的矩形,但我们也可以绘制路径。先来介绍如何绘制圆形和圆弧。大致分为以下步骤:
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
也会影响圆弧的样式。我们直接看具体事例:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4072a7df-6b7c-46cf-9c00-6a862df98b84%2Farc.jpg?table=block&id=be565801-ae5c-4dc7-bf4e-114ce74e6bf9&t=be565801-ae5c-4dc7-bf4e-114ce74e6bf9&width=1471&cache=v2)
线段
介绍完如何绘制圆形和圆弧,接下来我们继续利用路径来绘制线段。步骤和绘制圆形基本一致:
beginPath();
:开始绘制路径
ctx.moveTo(0, 50);
:把路径开始点移动到指定点(0, 50)
ctx.lineTo(x, y);
:从上一点绘制一条直线到(x, y)
- 定义线段样式
- 以描边(stroke)方式绘制线段
直接上代码和效果图
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F54ab4156-4870-438c-b341-d65eb9dfba84%2Fline-1.png?table=block&id=868ea059-4457-4e98-9498-d77b14834802&t=868ea059-4457-4e98-9498-d77b14834802&width=662&cache=v2)
当然,存在多个
lineTo()
也是可以的,比如:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3d088294-ab03-45d6-846f-22e69ce2dfe8%2Fline-2.png?table=block&id=0f59ae16-0060-4d39-b7ea-ec049f4ad0de&t=0f59ae16-0060-4d39-b7ea-ec049f4ad0de&width=666&cache=v2)
如果是这样,那我们通过绘制线条可以很简单的画出矩形、六边形等规则图形😎 读者可自行发挥一番
结语
canvas
有很多的知识和实践。比如绘制文字
、图像绘制
、阴影
、绘制钟表
等等。笔者也是刚刚入门canvas
,慢慢学习!- 作者:Leeson
- 链接: /article/canvas
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。