SegmentFault 思否技术周刊 Vol.75 — 简简单单画个“图”

本周技术周刊一起简单画个“图”，欢迎大家一起试一试～

文章推荐

原来 Canvas 也能直接绘制圆角矩形了 // XboxYan

很多时候，在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事，因为之前并没有直接的方法，只能通过直线和圆弧间接组合而成，下面是一个常规绘制方式

ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();

这里x、y、w、h、r分别代表x坐标、y坐标、宽度、高度、圆角。

这段代码应该是最精简的了，虽然不是特别复杂，但是应该很少有人能直接手写，主要是不够语义化，比较繁琐。

而圆角矩形又是一个非常常见的功能需求，为此，Canvas 在Chrome 99悄悄推出了一个新的方法：roundRect()，花一分钟了解一下

使用 Canvas API 模拟一个彩色时钟 // zkrisj

<canvas> 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。Canvas API 提供了一个通过JavaScript 和 HTML的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。它还能能够以 png、jpg 或 webp 格式保存图像。Canvas 提供了强大的 Web 绘图能力，所以我们要学会使用它。

我用 Canvas 带你看一场流星雨 // 南玖

首先我们需要的元素有：夜空、满天繁星、流星雨。

满天繁星： 这个其实就是画上一个个点，然后不断的通过颜色交替，营造出一种星星闪烁的意境。

流星雨： 流星处于他自己的运动轨迹之中，当前的位置最亮，轮廓最清晰，而之前划过的地方离当前位置轨迹距离越远就越暗淡越模糊，其实它就是一个渐变的过程，恰巧canvas有方法可以创建一个沿参数坐标指定的直线的渐变。然后让它从右上向左下移动，这样就能营造一种流星雨的效果，同时实现动画的循环。

OK，需求分析结束，准备动手开干～

你的代码怎么下起了雨？ // 小九

大多数的程序员都会有一个自己的个人网站，我们想要在自己的网站下面去刻画一个酷炫的背景，我们可能会使用一些炫酷的图片，或者叠加一个视频背景，亦或是通过css3 来进行手动绘制，这些方案都各有利弊，在出现canvas之后，我们出现了一种新的可能，我们可以通过canvas绘制一些非常炫酷的背景，有意思的是，我们还可以通过鼠标或者键盘事件与其交互，这样，我们就拥有了一种绘制动态背景的能力。

基于 Canvas 实现的多功能画板 // LH_S

最近空闲时间比较多，就想做点小工具玩玩，方案选了好几个，最终决定做一个基于canvas的画板，目前已经完成了第一版，有以下主要功能

画笔（动态宽度设置，颜色设置）
橡皮擦
撤回，反撤回，清除画板，保存
画板拖拽
多图层

现代 CSS 高阶技巧，完美的波浪进度条效果！ // chokcoco

再简单快速的过一下，什么是 CSS Painting API。

CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它们使开发人员可以直接访问 CSS 对象模型 （CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。

CSS Paint API 目前的版本是 CSS Painting API Level 1。它也被称为 CSS Custom Paint 或者 Houdini's Paint Worklet。

我们可以把它理解为 JS In CSS，利用 JavaScript Canvas 画布的强大能力，实现过往 CSS 无法实现的功能。

不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图 // chokcoco

首先，看到这样一个图形，如果想要使用一个标签完成整个背景，最先想到的肯定是使用背景 background 实现，不过可惜的是，尽管 CSS 中的 background 非常之强大，但是没有特别好的方式让它足以批量生成重复的六边形背景。

因此，在这个需求中，我们可能不得不退而求其次，一个六边形实现使用一个标签完成。

那么，就拿 1 个 DIV 来说，我们有多少实现六边形的方式呢？这里简单介绍 2 种方式：

• 使用 border 实现六边形
• 使用 clip-path 实现六边形

问答推荐

• Canvas 有什么办法可以算出一段 path 路径的中心点吗？
• canvas 中如何获取一个不规则区域的边界，给这个不规则区域描边？
• 当一个图片同时有旋转平移和缩放时，在 canvas 画布上绘制时应该优先绘制哪个?
• 页面能不能快速的做到横版适配？
• CSS: 在背景色为var()的情况下如何设置背景透明度？
• CSS 内外边距问题?

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。

每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。

如有问题可以添加小姐姐微信~