乐趣区

关于segmentfault-技术周刊:SegmentFault-思否技术周刊-Vol75-简简单单画个图

jiezi

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

文章举荐

原来 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 技术周刊 #

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

每周二更新，欢送「关注」。大家也能够在评论处留言本人感兴趣的主题，举荐主题相干的优良文章。

如有问题能够增加小姐姐微信~

退出移动版