当前位置: 首页 > 编程日记 > 正文

一维卷积filter_从零开始学Pytorch(七)之卷积神经网络

卷积神经网络基础

我们介绍卷积神经网络的卷积层和池化层,并解释填充、步幅、输入通道和输出通道的含义。

import torch
from torch.autograd import Variable
a=Variable(torch.FloatTensor([[2.,4.]]),requires_grad=True)
b=torch.zeros(1,2)
b[0,0]=a[0,0]**2+a[0,1]
b[0,1]=a[0,1]**2+a[0,0]
out=2*b
#其参数要传入和out维度一样的矩阵
out.backward(torch.FloatTensor([[1.,2.]]))
print('input:{}'.format(a.data))
print('output:{}'.format(out.data))
print('input gradients are:{}'.format(a.grad))

输出:input:tensor([[2., 4.]])
output:tensor([[16., 36.]])
input gradients are:tensor([[12., 34.]])

二维卷积层

最常见的二维卷积层,常用于处理图像数据。

二维互相关运算

二维互相关(cross-correlation)运算的输入是一个二维输入数组和一个二维核(kernel)数组,输出也是一个二维数组,其中核数组通常称为卷积核或过滤器(filter)。卷积核的尺寸通常小于输入数组,卷积核在输入数组上滑动,在每个位置上,卷积核与该位置处的输入子数组按元素相乘并求和,得到输出数组中相应位置的元素。图1展示了一个互相关运算的例子,阴影部分分别是输入的第一个计算区域、核数组以及对应的输出。

8bf60c4ab994fb4c4a4f2cada77bcb7c.png

图1 二维互相关运算

下面我们用corr2d函数实现二维互相关运算,它接受输入数组X与核数组K,并输出数组Y

import torch 
import torch.nn as nndef corr2d(X, K):H, W = X.shapeh, w = K.shapeY = torch.zeros(H - h + 1, W - w + 1)for i in range(Y.shape[0]):for j in range(Y.shape[1]):Y[i, j] = (X[i: i + h, j: j + w] * K).sum()return Y

构造上图中的输入数组X、核数组K来验证二维互相关运算的输出。

X = torch.tensor([[0, 1, 2], [3, 4, 5], [6, 7, 8]])
K = torch.tensor([[0, 1], [2, 3]])
Y = corr2d(X, K)
print(Y)

输出:tensor([[19., 25.], [37., 43.]])

二维卷积层

二维卷积层将输入和卷积核做互相关运算,并加上一个标量偏置来得到输出。卷积层的模型参数包括卷积核和标量偏置。

class Conv2D(nn.Module):def __init__(self, kernel_size):super(Conv2D, self).__init__()self.weight = nn.Parameter(torch.randn(kernel_size))self.bias = nn.Parameter(torch.randn(1))def forward(self, x):return corr2d(x, self.weight) + self.bias

下面我们看一个例子,我们构造一张

的图像,中间4列为黑(0),其余为白(1),希望检测到颜色边缘。我们的标签是一个
的二维数组,第2列是1(从1到0的边缘),第6列是-1(从0到1的边缘)。
X = torch.ones(6, 8)
Y = torch.zeros(6, 7)
X[:, 2: 6] = 0
Y[:, 1] = 1
Y[:, 5] = -1
print(X)
print(Y)

输出:tensor([[1., 1., 0., 0., 0., 0., 1., 1.], [1., 1., 0., 0., 0., 0., 1., 1.], [1., 1., 0., 0., 0., 0., 1., 1.], [1., 1., 0., 0., 0., 0., 1., 1.], [1., 1., 0., 0., 0., 0., 1., 1.], [1., 1., 0., 0., 0., 0., 1., 1.]])
tensor([[ 0., 1., 0., 0., 0., -1., 0.], [ 0., 1., 0., 0., 0., -1., 0.], [ 0., 1., 0., 0., 0., -1., 0.], [ 0., 1., 0., 0., 0., -1., 0.], [ 0., 1., 0., 0., 0., -1., 0.], [ 0., 1., 0., 0., 0., -1., 0.]])

我们希望学习一个

卷积层,通过卷积层来检测颜色边缘。
onv2d = Conv2D(kernel_size=(1, 2))
step = 30
lr = 0.01
for i in range(step):Y_hat = conv2d(X)l = ((Y_hat - Y) ** 2).sum()l.backward()# 梯度下降conv2d.weight.data -= lr * conv2d.weight.gradconv2d.bias.data -= lr * conv2d.bias.grad# 梯度清零conv2d.weight.grad.zero_()conv2d.bias.grad.zero_()if (i + 1) % 5 == 0:print('Step %d, loss %.3f' % (i + 1, l.item()))print(conv2d.weight.data)
print(conv2d.bias.data)

输出:Step 5, loss 3.968
Step 10, loss 0.448
Step 15, loss 0.052
Step 20, loss 0.006
Step 25, loss 0.001
Step 30, loss 0.000
tensor([[ 0.9969, -0.9993]])
tensor([0.0013])

互相关运算与卷积运算

卷积层得名于卷积运算,但卷积层中用到的并非卷积运算而是互相关运算。我们将核数组上下翻转、左右翻转,再与输入数组做互相关运算,这一过程就是卷积运算。由于卷积层的核数组是可学习的,所以使用互相关运算与使用卷积运算并无本质区别。

特征图与感受野

二维卷积层输出的二维数组可以看作是输入在空间维度(宽和高)上某一级的表征,也叫特征图(feature map)。影响元素

的前向计算的所有可能输入区域(可能大于输入的实际尺寸)叫做
的感受野(receptive field)。

以图1为例,输入中阴影部分的四个元素是输出中阴影部分元素的感受野。我们将图中形状为

的输出记为
,将
与另一个形状为
的核数组做互相关运算,输出单个元素
。那么,
上的感受野包括
的全部四个元素,在输入上的感受野包括其中全部9个元素。可见,我们可以通过更深的卷积神经网络使特征图中单个元素的感受野变得更加广阔,从而捕捉输入上更大尺寸的特征。

填充和步幅

我们介绍卷积层的两个超参数,即填充和步幅,它们可以对给定形状的输入和卷积核改变输出形状。

填充

填充(padding)是指在输入高和宽的两侧填充元素(通常是0元素),图2里我们在原输入高和宽的两侧分别添加了值为0的元素。

61898092d29b73d34141432144a014c5.png

图2 在输入的高和宽两侧分别填充了0元素的二维互相关计算

如果原输入的高和宽是

,卷积核的高和宽是
,在高的两侧一共填充
行,在宽的两侧一共填充
列,则输出形状为:

我们在卷积神经网络中使用奇数高宽的核,比如

的卷积核,对于高度(或宽度)为大小为
的核,令步幅为1,在高(或宽)两侧选择大小为
的填充,便可保持输入与输出尺寸相同。

步幅

在互相关运算中,卷积核在输入数组上滑动,每次滑动的行数与列数即是步幅(stride)。此前我们使用的步幅都是1,图3展示了在高上步幅为3、在宽上步幅为2的二维互相关运算。

03e3162a03dbf84452415f6e8904c06a.png

图3 高和宽上步幅分别为3和2的二维互相关运算

一般来说,当高上步幅为

,宽上步幅为
时,输出形状为:

如果

,那么输出形状将简化为
。更进一步,如果输入的高和宽能分别被高和宽上的步幅整除,那么输出形状将是

时,我们称填充为
;当
时,我们称步幅为

多输入通道和多输出通道

之前的输入和输出都是二维数组,但真实数据的维度经常更高。例如,彩色图像在高和宽2个维度外还有RGB(红、绿、蓝)3个颜色通道。假设彩色图像的高和宽分别是

(像素),那么它可以表示为一个
的多维数组,我们将大小为3的这一维称为通道(channel)维。

多输入通道

卷积层的输入可以包含多个通道,图4展示了一个含2个输入通道的二维互相关计算的例子。

b21b4b6f7df5697c2497c43a3f5c93dc.png

图4 含2个输入通道的互相关计算

假设输入数据的通道数为

,卷积核形状为
,我们为每个输入通道各分配一个形状为
的核数组,将
个互相关运算的二维输出按通道相加,得到一个二维数组作为输出。我们把
个核数组在通道维上连结,即得到一个形状为
的卷积核。

多输出通道

卷积层的输出也可以包含多个通道,设卷积核输入通道数和输出通道数分别为

,高和宽分别为
。如果希望得到含多个通道的输出,我们可以为每个输出通道分别创建形状为
的核数组,将它们在输出通道维上连结,卷积核的形状即

对于输出通道的卷积核,我们提供这样一种理解,一个

的核数组可以提取某种局部特征,但是输入可能具有相当丰富的特征,我们需要有多个这样的
的核数组,不同的核数组提取的是不同的特征。

1x1卷积层

最后讨论形状为

的卷积核,我们通常称这样的卷积运算为
卷积,称包含这种卷积核的卷积层为
卷积层。图5展示了使用输入通道数为3、输出通道数为2的
卷积核的互相关计算。

cd6a5574a3ae969228be0cd2f7de8ac8.png

图5 1x1卷积核的互相关计算。输入和输出具有相同的高和宽

卷积核可在不改变高宽的情况下,调整通道数。
卷积核不识别高和宽维度上相邻元素构成的模式,其主要计算发生在通道维上。假设我们将通道维当作特征维,将高和宽维度上的元素当成数据样本,那么
卷积层的作用与全连接层等价。

卷积层与全连接层的对比

二维卷积层经常用于处理图像,与此前的全连接层相比,它主要有两个优势:

一是全连接层把图像展平成一个向量,在输入图像上相邻的元素可能因为展平操作不再相邻,网络难以捕捉局部信息。而卷积层的设计,天然地具有提取局部信息的能力。

二是卷积层的参数量更少。不考虑偏置的情况下,一个形状为

的卷积核的参数量是
,与输入图像的宽高无关。假如一个卷积层的输入和输出形状分别是
,如果要用全连接层进行连接,参数数量就是
。使用卷积层可以以较少的参数数量来处理更大的图像。

卷积层的简洁实现

我们使用Pytorch中的nn.Conv2d类来实现二维卷积层,主要关注以下几个构造函数参数:

  • in_channels (python:int) – Number of channels in the input imag
  • out_channels (python:int) – Number of channels produced by the convolution
  • kernel_size (python:int or tuple) – Size of the convolving kernel
  • stride (python:int or tuple, optional) – Stride of the convolution. Default: 1
  • padding (python:int or tuple, optional) – Zero-padding added to both sides of the input. Default: 0
  • bias (bool, optional) – If True, adds a learnable bias to the output. Default: True

forward函数的参数为一个四维张量,形状为

,返回值也是一个四维张量,形状为
,其中
是批量大小,
分别表示通道数、高度、宽度。
X = torch.rand(4, 2, 3, 5)
print(X.shape)conv2d = nn.Conv2d(in_channels=2, out_channels=3, kernel_size=(3, 5), stride=1, padding=(1, 2))
Y = conv2d(X)
print('Y.shape: ', Y.shape)
print('weight.shape: ', conv2d.weight.shape)
print('bias.shape: ', conv2d.bias.shape)
print(conv2d.weight.data)

输出: torch.Size([4, 2, 3, 5])
Y.shape: torch.Size([4, 3, 3, 5])
weight.shape: torch.Size([3, 2, 3, 5])
bias.shape: torch.Size([3])

tensor([[[[-0.1092, 0.1168, 0.1400, -0.0465, -0.0568],
[-0.1320, -0.0556, 0.0207, -0.1416, -0.0540],
[ 0.0343, -0.0288, -0.0365, -0.0165, -0.1696]],

[[-0.0617, -0.1310, -0.1756, -0.1772, 0.0684],
[ 0.0529, -0.1666, 0.0058, -0.0135, -0.1763],
[ 0.1499, -0.0324, -0.1448, -0.0840, 0.1811]]],

[[[-0.0828, 0.1220, -0.1168, -0.0692, 0.1630], [-0.0491, -0.0292, -0.1773, -0.1622, 0.0116], [ 0.0757, 0.1569, -0.0121, -0.0682, -0.1187]],

[[ 0.0505, 0.0952, -0.1747, -0.1405, 0.0541], [ 0.1089, 0.0578, -0.1252, 0.1132, -0.0673], [-0.1200, 0.1759, 0.1563, -0.1153, 0.1390]]],

[[[ 0.0374, -0.1512, 0.1735, 0.1097, -0.0539], [-0.0002, 0.0969, 0.1322, 0.0050, 0.1296], [ 0.0055, 0.1743, -0.1126, -0.0422, 0.1633]],

[[-0.1269, -0.1741, -0.0255, -0.1518, -0.0297], [-0.1162, 0.0448, 0.0955, 0.0330, 0.1388], [ 0.1559, 0.1346, 0.0025, -0.1658, 0.0995]]]])

池化

二维池化层

池化层主要用于缓解卷积层对位置的过度敏感性。同卷积层一样,池化层每次对输入数据的一个固定形状窗口(又称池化窗口)中的元素计算输出,池化层直接计算池化窗口内元素的最大值或者平均值,该运算也分别叫做最大池化或平均池化。图6展示了池化窗口形状为

的最大池化。

a88d020df2c5596f6a401bdfb73e4361.png

图6 池化窗口形状为 2 x 2 的最大池化

二维平均池化的工作原理与二维最大池化类似,但将最大运算符替换成平均运算符。池化窗口形状为

的池化层称为
池化层,其中的池化运算叫作
池化。

池化层也可以在输入的高和宽两侧填充并调整窗口的移动步幅来改变输出形状。池化层填充和步幅与卷积层填充和步幅的工作机制一样。

在处理多通道输入数据时,池化层对每个输入通道分别池化,但不会像卷积层那样将各通道的结果按通道相加。这意味着池化层的输出通道数与输入通道数相等。

池化层的简洁实现

我们使用Pytorch中的nn.MaxPool2d实现最大池化层,关注以下构造函数参数:

  • kernel_size – the size of the window to take a max over
  • stride – the stride of the window. Default value is kernel_size
  • padding – implicit zero padding to be added on both sides

forward函数的参数为一个四维张量,形状为

,返回值也是一个四维张量,形状为
,其中
是批量大小,
分别表示通道数、高度、宽度。
X = torch.arange(32, dtype=torch.float32).view(1, 2, 4, 4)
pool2d = nn.MaxPool2d(kernel_size=3, padding=1, stride=(2, 1))
Y = pool2d(X)
print(X)
print(Y)

输出: tensor([[[[ 0., 1., 2., 3.],
[ 4., 5., 6., 7.],
[ 8., 9., 10., 11.],
[12., 13., 14., 15.]],
[[16., 17., 18., 19.],
[20., 21., 22., 23.],
[24., 25., 26., 27.],
[28., 29., 30., 31.]]]])
tensor([[[[ 5., 6., 7., 7.],
[13., 14., 15., 15.]],
[[21., 22., 23., 23.],
[29., 30., 31., 31.]]]])

相关文章:

nodejs配置nginx 以后链接mongodb数据库

服务器 :windows server2008 R2 反向代理 :nginx 1.15.1 for window 64位 数据库:mongodb 4 64位 使用框架express 首先下载nodejs 在官网或者中文网下载都可以 https://nodejs.org/zh-cn/ 然后将写好的项目打包成zip 上传 一定要带上 pac…

android切图尺寸_安卓设计尺寸规范

画布尺寸:如果想一稿适配ios,那就新建7201280 分辨率72,像素/英寸。如果单独设计安卓MD新规范的,那就新建10801920 分辨率72,像素/英寸。单位和度量 Units and measurementsdpi 屏幕宽度(或高度)像素 / 屏幕宽度(或高…

Vue.js使用前

下载安装 node,npm,git 安装cnpm 淘宝cnpm镜像https://npm.taobao.org/,-g表示进行全局安装 npm install -g cnpm --registryhttps://registry.npm.taobao.org # 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init web…

无法解析 list 中的方法 iterator_Python-list中的append()和extend()方法区别

一、append()和extend()方法都是用来添加数据到list末尾的,两者的区别:append()添加的时候会把添加的数据当成一个整体进行添加,允许添加任意类型的数据extend()添加的时候会把添加的数据迭代进行添加,只允许添加可迭代对象数据&a…

牛客网多校训练第一场 B - Symmetric Matrix(dp)

链接: https://www.nowcoder.com/acm/contest/139/B 题意: 求满足以下条件的n*n矩阵A的数量模m:A(i,j) ∈ {0,1,2}, 1≤i,j≤n.A(i,j) A(j,i), 1≤i,j≤n.A(i,1) A(i,2) ... A(i,n) 2, 1≤i≤n.A(1,1) A(2,2) ... A(n,n) 0.其中1≤n…

接口访问次数_系统运行缓慢,CPU 100%,Full GC次数过多,这一招帮你全搞定

处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题。当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警。本文主要针对系统运行缓慢这一问题,提供该问题的排…

python3-pwntools教程_python的pwntools工具的日常使用

1.安装操作系统:ubuntu16.04环境准备:pythonpiplibssl-devlibffi-devpwntools安装:sudo apt-get install libffi-devsudo apt-get install libssl-devsudo apt-get install pythonsudo apt-get install python-pipsudo pip install pwntoolsp…

Spring MVC 返回json数据 报406错误 问题解决方案

将jackson jar包改为jackson-databind-2.5.0.jar jackson-core-2.5.0.jar jackson-annotations-2.5.0.jar(这个版本的jackson 测试返回json格式的数据百分百没问题,其他版本的不稳定,所以选用这个版本的Jackson)ResponseBody 然…

c# 读hex_c#十六进制到位转换(c# hex to bit conversion)

c#十六进制到位转换(c# hex to bit conversion)我试图将64位数字的十六进制表示(例如字符串"FFFFFFFFF" )转换为二进制表示( "11111..." )。我试过了string result Convert.ToString(Convert.ToUInt64(value, 16), 2);但是这会导致一个令人困惑…

pip install lxml失败原因

python3 是用 VC 14 编译的, python27 是 VC 9 编译的, 安装 python3 的包需要编译的也是要 VC 14 以上支持的. VC 14 (2015)下载地址: https://www.microsoft.com/zh-cn/download/confirmation.aspx?id48145&6B49FDFB-8E5B-4B07-BC31-1…

go语言服务器连接mysql_go语言原生连接数据库

go操作mysqldatabase/sql原生支持连接池,是并发安全的这个标准库没有具体实现,只是列出了一些需要第三方库实现的具体内容下载驱动go get -u github.com/go-sql-driver/mysql连接数据库package mainimport ("database/sql""fmt"_ &q…

2017《面向对象程序设计》寒假作业一

1、你有什么技能比大多人(超过70%以上)更好? 我看电影比一般人多一点点;我听英文歌比一般人多一点点;我有一把尤克里里和一个滑板。我有很多爱好,但都没能发展成我的特长,它们给我的生活增添了情…

gis中的加权求和工具在哪里_ArcGIS教程:加权总和的工作原理

使用加权总和工具可以对多个输入进行加权及组合,以创建整合式分析。它可以轻松地将多个栅格输入(代表多种因素)与组合权重或相对重要性相结合,在这一方面它与加权叠加工具很相似。这两种工具有两个主要区别:加权总和工具不能将重分类值重设为…

flask执行python程序_Flask app后如何执行代码(应用程序运行)开始

但我想使用一种方法,它还可以保存相机中的所有相框(我已经有功能了)。在问题是,一旦我启动了Flask应用程序,我最多只能存储在localhost中打开web页面时捕获的帧。我希望能够在应用程序运行时执行其他代码(保存图片),以便保存所有图…

异常处理与MiniDump详解(3) SEH(Structured Exception Handling)

write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 讨论新闻组及文件 一、 综述 SEH--Structured Exception Handling,是Windows操作系统使用的异常处理方式。 对于SEH,有点需要说明的是,SEH是属于操作系统的特性,不为特定…

电热水器技术性能指标

1、即热式和贮水式的选择 有使用安全、卫生、不受水压限制,随时可供热水,水温易调节等优点,在发达的西方国家已广泛地使用,即热式热水器体积小,不须预热,但功率大,通常在4-6kw以上&#xff0…

java相关网络协议无响应_java网络协议有哪些

上网的途径有很多,java是最普遍的,那么卑java网络协议有哪些?了解网络安全常识,首先就要了解计算机网络安全有哪些基本注意事项,下面佰佰安全网小编就带您认识一下吧。概念协议是指计算机通信网络中两台计算机之间进行通信所必须…

es日期format_elasticsearch存储日期格式字段

elasticsearch创建index之后,可以设置mapping,如果mapping中没有设置date的format,那么默认为两种格式:date_optional_time 此格式为ISO8601标准 示例:2018-08-31T14:56:18.00008:00epoch_millis 也就是时间戳 示例151…

arraylist 后往前遍历_面试官:谈谈常用的Arraylist和Linkedlist的区别

Arraylist:底层是基于动态数组,根据下表随机访问数组元素的效率高,向数组尾部添加元素的效率高;但是,删除数组中的数据以及向数组中间添加数据效率低,因为需要移动数组。例如最坏的情况是删除第一个数组元素…

linux mipi驱动分析_寒武纪社招内推数字IC设计、DSI驱动、软件架构、产品经理、芯片架构、工具链开发、深度学习、FAE工程师...

点击上方蓝字关注我吧!为什么内推更靠谱?内推是基于人脉关系链的推荐,其背后有一定的信用背书,靠谱的人推荐的人相对也会比较靠谱,所以企业一般职位都是从内部开始分享的,相较于自己海投简历,内…

关于鼠标、键盘的几个例子

1 1. 鼠标的哪个按键被点击&#xff1f;2 <html>3 <head>4 <script type"text/javascript">5 function whichButton(event)6 {7 if (event.button2)8 {9 alert("你点击了鼠标右键!")10 }11 else12 {13 alert("你点击了鼠标左键!&qu…

mysql性能优化1

当我们去设计数据库表结构&#xff0c;对操作数据库时&#xff08;尤其是查表时的SQL语句&#xff09;&#xff0c;我们都需要注意数据操作的性能。这里&#xff0c;我们不会讲过多的SQL语句的优化&#xff0c;而只是针对MySQL这一Web应用最多的数据库。希望下面的这些优化技巧…

java获取date的时分秒_Java 之 Date 获取 年月日时分秒

package com.util;import java.text.DateFormat;import java.util.Calendar;import java.util.Date;public class Test {public void getTimeByDate(){Date date new Date();DateFormat df1 DateFormat.getDateInstance();//日期格式&#xff0c;精确到日System.out.println(…

python中字典的value可以为任意对象_Python对象作为字典值

所以我有以下代码,其中字典的值是一个对象,该对象的关键是对象中的一个项目&#xff1a;class MyObject():def getName(self):return self.namedef getValue(self):return self.valuedef __init__(self,name, value):self.name nameself.value valuedict {}object MyObject…

Android Java使用JavaMail API发送和接收邮件的代码示例

JavaMail是Oracle甲骨文开发的Java邮件类API,支持多种邮件协议,这里我们就来看一下Java使用JavaMail API发送和接收邮件的代码示例 使用Javamail发送邮件&#xff0c;必需的jar包&#xff08;请下载javamail的源文件&#xff0c;官方下载页&#xff1a;http://www.oracle.com/t…

python 包用法_Python 基础教程之包和类的用法

Python 基础教程之包和类的用法这篇文章主要介绍了 Python 基础教程之包和类的用法的相关资料, 需要的朋友可以参考下Python 是一种面向对象、解释型计算机程序设计语言&#xff0c;由 Guido van Rossum 于 1989 年底发明&#xff0c;第一个公开发行版发行于 1991 年。Python 语…

[bzoj2259][Oibh]新型计算机_Dijkstra

新型计算机 bzoj-2259 Oibh 题目大意&#xff1a;给定一个n个数的数列&#xff0c;第i个数为a[i]&#xff0c;更改第i个数至x的代价为|x-a[i]|。求最小代价&#xff0c;使得&#xff1a;读入一个数s1后&#xff0c;向后连着读s1个数&#xff0c;然后如s2&#xff0c;再向后读s2…

arcengine 加载地图不显示_地图建筑建模制作与输出

导读阅读完此文&#xff0c;你会了解&#xff1a;1、地图建筑模型通常如何制作的2、地图建筑模型替换策略地图上往往会有一些定制建筑的需求&#xff0c;例如将下面的水立方做成气泡感的。 加入定制模型之前加入定制模型之后这种需求就需要建模师对建筑做定制化建模。模型制作首…

用easyx画电子钟_Canvas入门-利用Canvas绘制好玩的电子时钟

在这之前你需要了解一下方法的使用&#xff1a;beginPath()closePath()moveTo()lineTo()fill()stroke()fillRect()clearRect()这些我在前面的文章介绍过&#xff0c;可以看&#xff1a;画个圆arc()方法arc(x, y, radius, startAngle, endAngle, anticlockwise) > 画一个以(x…

前端开发工程师面试题之综合篇

温馨提示&#xff1a;以下系列的面试题是通过整合网上各位大牛的文章而成&#xff0c;站在巨人的肩膀上&#xff0c;能够让我们更进一步。 1、页面从输入URL到页面加载显示完成&#xff0c;这个过程中都发生了什么&#xff1f; 输入域名地址发送域名地址至DNS服务器并获得对应W…