竞，从它进入我们的视野开始，就离不开红蓝黄绿的色彩与光芒。久而久之，背光、幻彩已经成为了电竞装机的标配。如果自己装机的内存不带马甲灯条，CPU风扇不带RGB幻彩背光，机箱里不装几个背光很炫的风扇，都不好意思说自己是一个资深的电竞玩家。

光影交错的侧透感受

灯光与性能无关，却带给人电竞的含义。干净的侧透如今已然成为众多玩家攒机的机箱首选。那么能透射出精美背光的侧透机箱也就应运而生了。侧透不仅让玩家心中时时体验着电竞带来的美感，同时也让整机效果更显档次。

爱国者月光宝盒破晓机箱

如今，干净的侧透已经成为潮流，现在的机箱也纷纷朝着这个方向发展。那么下边，我们就为大家介绍几款目前市售热销的侧透机箱产品，让小伙伴们装机也能够上档次。

铝制机箱在DIY玩家心中是高端的代表，因为质感和工艺的问题，铝制机箱的价格要远远高于传统的机箱，现在爱国者“暮光之城”系列机箱来袭，首发的两款“新月”“破晓” 两款机箱均采用了铝材质+钢化玻璃的组合，外观和质感相当不错。最关键的是，现在这款机箱在京东秒杀价249元，将铝箱的价格拉入主流级的市场，喜欢的玩家不妨抓紧时间来选购一下吧！

（图片来自京东商城）

爱国者破晓机箱（图片来自京东商城）

今天笔者就来和大家聊一聊破晓这款机箱，相信听名字，很多玩家就已经对这款机箱的由来，这款机箱前面板采用铝材质设置，并且在前面板下部做了斜角切割的设计，玩家可以之间看到面板后面的风扇，在加装发光风扇之后，视觉效果十分不错。

爱国者破晓机箱

不仅如此，这样的设计在提升颜值以及个性化的同时，还能让整机的散热效能得到进一步的提升。

机箱正面展示

破晓机箱的外观尺寸为：453*212*493MM，属于中小型身材的机箱，摆在桌面上和脚下都不会占用太大的地方。

机箱的侧部采用钢化玻璃设计

同时机箱的左侧侧板采用全尺寸的钢化玻璃设计，质感不错，机箱的顶部采用全尺寸的散热孔位设计，支持140mm*2的散热风扇安装，并且散热器位上还设计了磁吸式的防尘网，方便玩家的日常维护！

机箱内部采用分体式架构设计

在内部架构设计上，破晓机箱采用了分体式架构设计，将电源仓和内部空间独立开来，在散热互不干扰的情况下，玩家还能拥有更好的装机体验。

硬盘架设计

在硬盘位的设计上，破晓为我们设计了2个HDD硬盘位以及3个SSD硬盘位，基本满足玩家的存储需求，同时还在HDD硬盘位上下部设计了散热孔位，保证机械硬盘在工作时热量能够及时的散发出去。

爱国者月光宝盒破晓

进入购买

作为机电行业中耕耘多年的航嘉来讲，航嘉MVP ARES 战神机箱的外观突出一个惊艳，对于很多的游戏玩家来讲，这样的外观非常适合打造开放式的炫光平台，现在这款机箱在京东售价1599元，心动的玩家不妨抓紧时间来选购吧。

（图片来自京东商城）

航嘉MVP ARES战神机箱

航嘉 MVP ARES 战神机箱的两侧使用的是4mm的深黑色钢化玻璃，可以很好的让玩家打造光污染平台。

机箱顶部展示

机箱的顶部和前部都采取了开放式的设计，这样的设计可以提升机箱的散热能力，并且还很好的提升了机箱的颜值。战神机箱的顶部采用了45°的鳍片设计，方便顶部的空气流通，为整机的散热也提供了很好的基础。

机箱的I/O区

机箱的I/O区设计在战神前脸中间，并且为玩家提供了开机键、重启键、2个USB2.0接口以及2个USB3.0接口，同时还有一组音频接口，充分满足玩家的日常使用需求。

航嘉MVP ARES战神机箱的内部空间采用的ATX架构，最大兼容EATX主板，兼容能力强悍。机箱内部支持最高160mmCPU散热器和400mm以内的显卡安装，玩家再也不用担心自己的超长显卡没办法安装进机箱了。

机箱内部空间展示

机箱背板展示

在存储位扩展上，机箱为我们提供了4个硬盘位，包括2个3.5英寸和2个2.5英寸硬盘位，可以满足玩家的日常存储需求。

机箱硬盘位展示

在水冷的支持上，得力于战神ARES为全塔机箱，机箱的前面板，顶部以及底部均可以安装3个12cm的散热风扇，并且在机箱的背部还可以安装一个12cm的风扇，想要装水冷的玩家，这款机箱是一个非常不错的选择。

编辑总结：航嘉MVP ARES战神机箱外观设计霸气炫酷，全铝材质，钢化玻璃侧板的设计充分说明这是一款针对高端用户的机箱，机箱内部空间充足，兼容性强悍，同时机箱采用了开放式的设计，这样可以更好的展示机箱内部的硬件，这可能也是未来机箱的一个发展方向，对于喜欢大空间水冷箱的高端玩家，航嘉MVP ARES战神无疑是一个非常不错的选择。

航嘉 MVP ARES战神

京东

说到电竞炫酷，说到RGB幻彩，若不上三面侧透的机箱怎能淋漓尽致地表达我们的电竞情感。而长城魔镜T600机箱就是这样一款满足大家电竞激情的产品。这款机箱是目前长城魔镜系列机箱中的高端形象，有了这款机箱相信你的硬件平台能够为你带来更加优越的游戏体验。

戳我进入京东商城

长城T600机箱继承了长城魔镜系列机箱的优秀设计，外观设计延续了大侧透的特点，更加简约精致的风格让机箱看上去冷酷而时尚。机箱采用三面全透的钢化玻璃设计，完全让机箱成为PC硬件的展示平台，同时机箱花费高成本打造3mm厚度的全铝顶盖，阳极铝拉丝工艺让机箱质感更强，符合现在DIY玩家对机箱外观的审美和需求。

挑选游戏机箱，内部空间宽裕是游戏玩家挑选机箱的重要标准。长城T600机箱尺寸为487×226×520mm，兼容市面所有E-ATX/ATX/M-ATX/ITX大小规格主板，同时支持高度达到165mm的CPU散热器以及400mm的显卡，能够轻松安装旗舰级GTX1080Ti独立显卡，能够满足高端玩家组装顶级主机的需求。

为提高主机的散热性能，机箱在前面板配备了3个RGB风扇，除了为主机带来更好的散热性能以外，还能让玩家玩转酷炫的RGB灯光效果，预留顶部两个12cm风扇安装位以及机箱背部也预留了1个RGB风扇安装位。无论是散热性能还是玩RGB光污染灯光，长城T600都能很好地支持使用。

在细节方面，长城T600为玩家打造了个性的发光信仰LOGO灯，免工具硬盘的安装让玩家在安装以及硬盘的时候得心应手；玻璃侧板防震硅胶垫的设计可以更好地保护钢化玻璃侧板；布线硅胶保护圈理线方便美观，简简单单几个细节展现该机箱为游戏玩家而定制的真诚态度。

长城T600采用了优质SGCC镀锌钢板+钢化玻璃+铝板的材质组合，扎实的用料和精良的做工使得机箱不仅结构牢固，而且标配3个RGB风扇位用户提供了周到的DIY玩法。玩家的挑选机箱的时候除了关注机箱外在的外观之外，还要考虑机箱内在的设计以及兼容性，这样才会省去组装电脑时带来不必要的麻烦，同时在安装硬件的过程中更加得心应手。长城T600无论是外观用料还是可DIY方面，都是可圈可点的，国庆期间想要组装游戏主机的玩家不妨多多关注这款优秀的机箱。

很多时候人都是属于在矛盾中生存着，很多时候自己的需求往往都是矛盾的存在，对与DIY产品也是如此，很多时候的往往想攒建高端主机，但是高端硬件的尺寸也十分巨大，就导致要更大的机箱作为载体，这样又导致机箱体型又十分硕大，机箱大了之后又很占地方，这一矛盾心态时常发生。但最近出现了一个系列的机箱产品就很好的解决这个问题，标准宽体又有强大的兼容性能，这便是鑫谷宽系列机箱产品，其中鑫谷宽寂静音还附有静音的功能。

鑫谷宽寂机箱

鑫谷宽寂静音机箱为什么有那么好的兼容性能呢？那是因为其机箱采用全新的机箱五金进行设计，在机箱宽度方面直接高达的205MM，这也是只会出现全塔机箱的宽度，这一宽度衍生出更多优势，比方说，背部走线空间，从普通的10MM左右直接直接升级到20MM，CPU散热直接支持到了160MM，同时还很好的解决了水冷排与光效内存的兼容性问题。

内部架构解析

其机箱内部延续鑫谷ATX2.0机箱结构技术，设计有独立的电源仓位，让内部空间最大的同时，支持360MM的水冷排安装，显卡支持长度也高达330MM，电源安装位方面也做了优化，直接可以达到180MM，加上ATX\M-ATX\ITX的主板兼容性能，无不凸显其内部空间的最大化利用率。之外还让其硬件与电源形成两个分离风道互不干扰，更利于其硬件的使用寿命。

五金结构解析

其又一特色便是其静音功能，鑫谷宽寂静音机箱在箱体的四面均采用了深海高分子树脂吸音棉，其超大的覆盖率，然后这款产品轻松达到静音效果，在是内部硬件满载使用的时候也只能少量感觉到，如果普通机箱待机时所造成的噪音，甚至更少。

强悍兼容能力

鑫谷宽寂静音机箱，无论是静音效果还是机箱内部性能都十分的出众，支持ATX、M-ATX、ITX主板安装，显卡支持到330M的长度，加上支持160MM CPU散热器，同凸显其兼容性能，所以这款产品对于硬件和环境有所追求的用户都是一个很不错的选择。

京东自营店：https://item.jd.com/4342689.html

兆方数码专营店：https://detail.tmall.com/item.htm?spm=a230r.1.14.223.ebb2eb25uF4Np&id=553271484930&ns=1&abbucket=5&sku_properties=5919063:6536025

金河田银狐箱外观个性，整个机身采用全铝设计，前面板的个性弯折设计，让机箱更加靓丽，同时机箱的侧板采用钢化玻璃设计，适合玩家打造光污染平台，现在这款机箱在京东售价899元,追求个性外观的玩家不妨抓紧时间来选购这款高端全铝机箱吧。

（图片来自京东商城）

金河田银狐机箱采用铝合金主体搭配钢化玻璃侧板

银狐机箱前面板镂空logo设计

银狐机箱采用了时尚的侧透设计，虽然侧透已经成为机箱的主流，但银狐还是设计了与众不同的侧板，全侧透的钢化玻璃为不规则的形状设计，可以更好地展示机箱内部的硬件平台。

银狐机箱的棱角分明设计

银狐机箱I/O区布局

机箱在前部设计了银狐logo，顶前部则是机箱的I/O区，这里配置了开机键，音频接口，两个USB 2.0接口和一个USB 3.0接口，有很好的实用性。

银狐的PCI拓展位采用了和其他产品不同的设计，7条扩展槽位于机箱顶部，可以满足玩家对硬件的扩展需要，不过在装机的时候需要注意硬件安装方向。

金河田 银狐

[参考价格] 899元

[经销商] 京东

不论从诺基亚的复苏还是锤子的热销，都体现了人们对于具有工匠精神的优秀产品的追求，也从侧面反映出当前消费市场上“匠心”缺失的问题。不过好在匠心并没有离开我们，它仍然被一些优秀的企业所坚持，一直陪在我们身边。现在先马工匠5号已经在京东上架仅售169元，心动的玩家抓紧时间来看看吧！

图片来自京东商城

先马工匠5号机箱

其实这些匠心之物能够打动人的原因，除了产品本身精工细作的优秀品质之外，还有一个原因就是用户能够通过这些独具匠心的产品感受到设计者的匠人情怀。特别是在这个略显浮躁而匠心缺失的时代，能够发现和遇到打心眼里喜欢的匠心产品无疑是一件令人非常愉快的事情。

用料扎实

对于PC玩家来说，是否有这样令人感受到工匠情怀的匠心之物呢？当然有。国产机箱电源的标志性品牌先马一直致力于为玩家提供高性价比的优质产品，也将工匠精神贯穿在产品的设计和制造过程当中，即使百元级的平民机箱也有工匠系列这种在同价位表现优秀的产品供消费者选择，近期推出的工匠5机箱又是一款值得购买的匠心产品。

前面板一体弯折工艺

前面板RGB炫酷灯光设计

或许有人觉得百元机箱谈工匠精神言过其实，但在先马工匠5机箱上，当编辑看到全金属材质、与机箱顶盖一体成型的面板、呼吸式/闪烁模式的面板RGB灯光、两侧全包围防EMI辐射侧板和易拉式风扇安装以及在做工细节上的用心处理之后，仿佛在先马工匠5机箱上看到了当年诺基亚在产品设计与制造上的工匠精神，在这个货币贬值的的时代，百元机箱能做到这种程度，除了信仰和匠心之外真的再找不出其他的理由。

丰富的内部架构

尽管工匠5机箱并不豪华，但这并不影响它成为先马为普通玩家精心设计的一款优质机箱。在保证足够好的设计与做工用料的同时，工匠5提供了包括ATX/Micro ATX主板、2个2.5英寸SSD、3个3.5英寸HDD、350mm限长显卡、167mm高CPU散热器和1个USB3.0、2个USB2.0前置接口，加上对流式散热风道和背板走线设计，为普通玩家带来了对主流硬件平台良好的兼容、散热与扩展能力。这种针对目标用户群体的需求设计和兼容、散热的细节处理，体现出先马不论产品贵贱都能够专业专注的工匠精神。

不论产品定位高低，在设计和制造过程中都认真专注，打造出同等价位提供更加优质体验的产品，这就是工匠情怀，而这正是先马所一直坚持并为之努力的方向。

先马工匠5号机箱：https://item.jd.com/4515411.html

至睿黑曜石机箱整体采用黑色的配色，沉稳大气，同时大侧透的设计也让机箱更具时尚感，机箱的前面板为火山织纹金属面板，手感和质感都非常不错。现在这款机箱在京东售价279元，感兴趣的玩家抓紧时间来选购吧！

（图片来自京东商城）

至睿黑曜石机箱正面展示

细节展示

机箱后部展示

机箱顶部

机箱的侧部和顶部的I/O区采用新类肤涂层，不仅防老化，还能让手感更加出众。同时顶部亮色的边框，也让机箱更具时尚感。

顶部按压式防尘网

机箱前部散热风扇

顶部按压式防尘网

不仅如此，机箱的顶部还采用按压式弹起的防尘网设计，非常方便玩家日常维护和安装冷排。

整机灯效效果图（需加装风扇）

机箱标配了一枚RGB风扇（后置）、一枚黑框蓝叶风扇（前置）、和一根软磁性的RGB灯条，可以通过I/O区的RGB灯控键来进行灯光切换。

I/O区 类肤涂层设计

在I/O区内，机箱为玩家提供了开机键，RGB灯控键，2个USB 2.0接口以及1个USB 3.0接口，还有一组音频接口，基本满足玩家的日常使用需求。

爱国者 月光宝盒曜

anvas 线段两端的样式
●canvas 中, 是可以设置线段两端的样子的
●我们先来画三个平行线

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.beginPath()

// 第二个线段
ctx.moveTo(100, 150)
ctx.lineTo(200, 150)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.beginPath()

// 第三个线段
ctx.moveTo(100, 200)
ctx.lineTo(200, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.beginPath()

●接下来, 我们开始设置两端样式
语法: 工具箱.lineCap = '值'
值 :
=> butt 无
=> round 圆
=> square 方

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'

// 两端样式设置为 butt
ctx.lineCap = 'butt'

ctx.stroke()
ctx.beginPath()

// 第二个线段
ctx.moveTo(100, 150)
ctx.lineTo(200, 150)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'

// 两端样式设置为 round
ctx.lineCap = 'round'

ctx.stroke()
ctx.beginPath()

// 第三个线段
ctx.moveTo(100, 200)
ctx.lineTo(200, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'

// 两端样式设置为 'square'
ctx.lineCap = 'square'

ctx.stroke()
ctx.beginPath()

●square 和 round 会让线段稍稍变长
●线段端点样式的颜色会和线段颜色保持一致

canvas 线段拐点的样式
●canvas 在绘制线段拐角的时候, 会自动进行闭合拐角
●我们也可以通过设置, 来设置一下拐角的样子
●先来绘制三个带有拐角的线段

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 150)
ctx.lineTo(100, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.beginPath()

// 第二个线段
ctx.moveTo(200, 100)
ctx.lineTo(300, 150)
ctx.lineTo(200, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.beginPath()

// 第三个线段
ctx.moveTo(300, 100)
ctx.lineTo(400, 150)
ctx.lineTo(300, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.beginPath()

●canvas 对于线段拐点默认的样式就是尖角拐点
●我们可以进行一些设置来改变
语法: 工具箱.lineJoin = '值'
值:
=> miter 默认尖角拐点
=> round 创建圆角拐点
=> bevel 创建斜角拐点

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 150)
ctx.lineTo(100, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'

// 默认拐点
ctx.lineJoin = 'miter'

ctx.stroke()
ctx.beginPath()

// 第二个线段
ctx.moveTo(200, 100)
ctx.lineTo(300, 150)
ctx.lineTo(200, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'

// 圆角拐点
ctx.lineJoin = 'round'

ctx.stroke()
ctx.beginPath()

// 第三个线段
ctx.moveTo(300, 100)
ctx.lineTo(400, 150)
ctx.lineTo(300, 200)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'

// 斜角拐点
ctx.lineJoin = 'bevel'

ctx.stroke()
ctx.beginPath()

canvas 填充
●在 canvas 中, 一旦你画出封闭图形以后
●我们不光可以描边, 也可以进行填充, 也就是填满颜色
●先来画一个矩形吧

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
ctx.lineTo(100, 200)
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
ctx.closePath()
ctx.stroke()

●我们这里用的是描边( 工具箱.stroke() )
●是按照痕迹把路线描绘下来
●在 canvas 内, 除了描边, 还有一个叫做填充
●咱们再来一个矩形, 这次我们不进行描边, 而是进行填充

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
ctx.lineTo(100, 200)

// 3. 填充
// 语法: 工具箱.fill()
ctx.fill()

●这样, 就会按照我们绘制的路线, 以填充的形式出现一个封闭图形
●注意 : 填充的时候可以不进行图形闭合, 会自动闭合图形以后进行填充
●填充的时候也可以设置填充颜色的设置

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
ctx.lineTo(100, 200)

// 3. 填充
// 3-1. 填充颜色设置
// 语法: 工具箱.fillStyle = '值'
ctx.fillStyle = 'skyblue'
// 3-2. 填充
ctx.fill()

●填充是可以和描边一起使用的

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制第一个线段
// 第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
ctx.lineTo(100, 200)

// 自动闭合图形
ctx.closePath()

// 3. 描边
// 3-1. 设置描边样式
ctx.lineWidth = 4
ctx.strokeStyle = 'orange'
// 3-2. 描边
ctx.stroke()

// 4. 填充
// 4-1. 填充颜色设置
ctx.fillStyle = 'skyblue'
// 4-2. 填充
ctx.fill()

canvas 的填充规则
●我们发现, 到现在为止, canvas 的绘制, 描边, 填充都很简单
●但是接下来的内容可能稍微复杂一些了
●我们要说一下 canvas 的填充规则
●我们管 canvas 的填充规则叫做 非零填充

例子
●一下子可能说不明白, 我们先来看一个例子
●绘制一个 "回" 形
●注意一个细节 :
○我们绘制的过程
○里面的小正方形我们会按照 顺时针 的方向绘制
○外面的大正方形我们也会按照 顺时针 的方向绘制

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制里面的小正方形
ctx.moveTo(200, 100)
ctx.lineTo(300, 100)
ctx.lineTo(300, 200)
ctx.lineTo(200, 200)
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
ctx.stroke()

// 3. 开始绘制外面的大正方形
ctx.moveTo(150, 50)
ctx.lineTo(350, 50)
ctx.lineTo(350, 250)
ctx.lineTo(150, 250)
ctx.stroke()

●两个正方形都是这个方向绘制的, 我们接下来把描边的线去掉
●我们来进行一下填充看看

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制里面的小正方形
ctx.moveTo(200, 100)
ctx.lineTo(300, 100)
ctx.lineTo(300, 200)
ctx.lineTo(200, 200)
// ctx.lineWidth = 2
// ctx.strokeStyle = '#000'
// ctx.stroke()

// 3. 开始绘制外面的大正方形
ctx.moveTo(150, 50)
ctx.lineTo(350, 50)
ctx.lineTo(350, 250)
ctx.lineTo(150, 250)
// ctx.stroke()

// 4. 填充
ctx.fill()

●我们发现, 两个都被填充了
●这是因为, 在填充的时候, 就是会一次性把所有的内容都会填充好
●注意 :
○和是否闭合路径 ( 工具箱.closePath() ) 没有关系
○和里外正方形的绘制先后顺序没有关系
●那是怎么回事呢 ?

例子
●先不管是怎么回事, 我们再来看一个例子
●还是绘制一个 "回" 形
●注意一个细节 :
○我们绘制的过程
○里面的小正方形我们会按照 逆时针 的方向绘制
○外面的大正方形我们也会按照 顺时针 的方向绘制

// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 开始绘制里面的小正方形
ctx.moveTo(200, 100)
ctx.lineTo(200, 200)
ctx.lineTo(300, 200)
ctx.lineTo(300, 100)
ctx.lineWidth = 2
ctx.strokeStyle = '#000'
ctx.stroke()

// 3. 开始绘制外面的大正方形
ctx.moveTo(150, 50)
ctx.lineTo(350, 50)
ctx.lineTo(350, 250)
ctx.lineTo(150, 250)
ctx.stroke()

●这回两个矩形绘制的时候, 方向不一样了
●我们再来填充一次试试看

●我们会发现, 和刚才填充出来的结果不一样了
●这又是怎么回事呢 ?
●难道和顺时针逆时针有关系吗 ?

非零填充
●其实我们的填充和顺时针逆时针有关系, 但是不是简单的顺逆时针的问题
●概念 :
○从任何一个区域向画布最外层移动
○按照经历最短边计算
○其中经历的顺时针的边记录为 +1
○经历逆时针的边记录为 -1
○只要最终总和不为 零, 那么该区域填充
○如果最终总和为 零, 那么该区域不填充
●听起来很麻烦, 咱们来画布上看一下效果就好了
●这次我们绘制一个稍微复杂一些的图形

●这是两个矩形对接在一起, 一个是顺时针绘制, 一个是逆时针绘制
●我们来分析一下看看
●首先, 最左侧封闭图形

○如果走最短的路线出来的话, 会经历一条顺时针的边
○记录为 +1
○最终为 +1
○所以该区域填充
●然后, 最右侧封闭图形

○经历最短路线出来的话, 会经历一条逆时针的边
○记录为 -1
○最终为 -1
○所以该区域填充
●最后, 中间的封闭图形

○经历最短路线出来的会, 必然会经历一条顺时针的边和一条逆时针的边
○顺时针记录为 +1
○逆时针记录为 -1
○最终为 0
○所以该区域不填充
●此时我们对当前图形进行填充后观察

●这就是最后填充好的样子