金大大

canvas疑点验证

4

## 主流浏览器中canvas的限制 在 `chrome` 和 `safari` 下验证 1 单个canvas的最大面积都是 `268435456` (16384 * 16384) 2 单边长度限制, 查阅资料显示最大宽高为`32767`, 实际验证的结果是 `chrome` 下的最大单边长度是 `65535`, `safari` 下的最大单边长度是 `4194304` 3 canvas总体积的限制: chrome: 无限制 safari: 4096MB 验证方法:...

css新特性（包含草案）

6

### 动态模糊（Motion Blur 提案  当你拍摄一个物体（或是一个人），就像下图，这个模糊就会发生，因为这个物体（人运动）移动的速度超过了相机拍摄所需的曝光时间，所以这个物体会在最终的照片中出现多次，因为它在关键时刻移动。  目前动态模糊目前是提案中 [https://github.com/w3c/csswg-drafts/issues/3837](https://github.com/w3c/csswg-drafts/issues/3837) ```html body { display: flex; width: 100vw; justify-content: center; align-items: center; min-height: 100vh; } body > .ball, body > .motion-ball {...

## 关于useState ##### Q1: `useState` 如果保存状态？ ##### Q2: `useState` 如何更新状态？ ### hook如何保存数据 `FunctionComponent` 的 `render` 只是函数调用。那么在 `render` 内部调用是如何获取到对应的数据？ 例如： * `useState` 获取 `state` * `useMemo` 获取缓存数据 A: 每个组件都有个对应的 `fiber` 节点，用于保存组件的信息...

CSS: 记录最近开发中遇到的几个css知识点

4

### padding 百分比 当一个元素宽高不等时 ```css padding: 10% ``` 到底如何解析，是宽度的10%，还是高度的10%，亦或是宽10%，高10% 例子1：  这种情况下我们发现是宽度的10%，那到底是父元素宽度的10%，还是元素本身的10%那？看例子2  我们发现是父元素宽度的10%，那如果是 ```css padding: 20% 10%; ``` 这种情况下，会不会是 padding: 父元素高的20% 宽度的10%那，看例子3:  最终我们发现，当padding值为`百分比`的时候，基准值是父元素宽度值

```js const data = [1, 2, 3, 4, 5]; const request = item => new Promise(resolve => setTimeout(() => { console.log(item); resolve(item); }, 2000) ); const queue = async data...

flutter 实际开发中遇到的一些坑

2

### 1. window.physicalSize window.physicalSize 不要运用在build函数中 在run debug模式下没有问题 但是在profile模式下会无法显示widget，并会导致卡顿和影响到其他组件

### Step.1 Canvas转换为图片 首先，你要了解flutter如何将canvas转换成图片，这里有一个非常好的例子分享给大家[flutter_canvas_to_image](https://github.com/rxlabz/flutter_canvas_to_image)，这里简单讲解一下思路： 1.首先创建一个 ui.PictureRecorder（记录仪）, 然后作为载体创建一个canvas对象 ```dart // 创建一个记录仪 final recorder = new ui.PictureRecorder(); final canvas = new Canvas( recorder, new Rect.fromPoints( new Offset(0.0, 0.0), new Offset(200.0, 200.0))); ```...

### NeverScrollablePhysics NeverScrollablePhysics呈现不可滚动的列表。使用此选项可以完全禁用滚动。 ### BouncingScrollPhysics 当列表结束时，BouncingScrollPhysics会弹回列表 ### ClampingScrollPhysics 这是Android上使用的默认滚动物理。 列表在结尾处停止并给出指示的水波纹效果。 ### FixedExtentScrollPhysics 这与此列表中的其他内容略有不同，因为它仅适用于FixedExtendScrollControllers和使用它们的列表

flutter i18n 国际化

3

#### [English](https://github.com/jindada/blog/issues/12) ### step 1 安装Android Studio 插件 `Flutter_i18n` （当前版本是0.2） ### step 2 安装完成之后，重启 Android Studio，flutter项目下面会出现`res/values`文件夹 ### step 3 点击同步按钮，会自动生成`lib/generated/i18n.dart` ### step 4 4.编辑`main.dart`, 由于lib/generated/i18n.dart文件有[bug](https://github.com/long1eu/flutter_i18n/issues/26)，所以`localizationsDelegates`, `localeResolutionCallback`部分代码需要重写 ```dart class MyApp extends...