-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathcanvas-draw.html
39 lines (39 loc) · 4.98 KB
/
canvas-draw.html
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
32
33
34
35
36
37
38
39
<div style="line-height: 1.5; background-color: #f1f1f1; padding: 30px 20px; box-sizing: border-box;">
<img style="display: block; width: 50px; border-radius: 25px; margin: 0px auto;" src="https://thirdwx.qlogo.cn/mmopen/vi_32/XlDTibpygpfmrTjIs97A4qXOAN91HHFuDQHo0uP3fBeibciaUSdTrXspC5C42oMD8fIiasb5RD72d4QxsL3AFiclBQg/132"/>
<div style="font-size: 18px; text-align: center; margin-top: 20px; color: rgba(0, 0, 0, 0.9);">author: alexayan</div>
<div style="margin: 20px 10px; font-size: 16px; color: rgba(0, 0, 0, 0.4);">
<p>使用 HTML 构建易于理解的 UI 结构，使用 CSS 来描述 UI 样式和布局，一种优雅的 Canvas 绘图实现。</p>
</div>
<div style="margin-top: 20px; font-size: 16px;">
<div style="display: inline-block; width: 35%; text-align: right; color: rgba(0, 0, 0, 0.9);">
实现原理：
</div>
<div style="display: inline-block; width: 64%; padding-left: 15px; box-sizing: border-box; text-align: left; color: rgba(0, 0, 0, 0.5);">
构建虚拟<span style="font-weight: bold; margin: 0px 4px; font-style: italic; border-bottom: 1px dashed #aaaaaa; height: 19px;">DOM 树</span>，依据 CSS 规范计算样式，使用 CSS <span style="font-weight: bold; margin: 0px 4px; font-style: italic; border-bottom: 1px dashed #aaaaaa; height: 19px;">盒模型</span>对 DOM 进行布局，计算出所有元素的位置。最后将 DOM 树通过 Canvas Api 进行绘制。
</div>
</div>
<div style="margin-top: 20px; font-size: 16px;">
<div style="display: inline-block; width: 35%; text-align: right; color: rgba(0, 0, 0, 0.9);">
兼容性：
</div>
<div style="display: inline-block; width: 64%; padding-left: 15px; box-sizing: border-box; text-align: left; color: rgba(0, 0, 0, 0.5);">
HTML 样式和布局计算不依赖于特定 JavaScript 宿主环境，因此可以在 <span style="font-weight: bold; margin: 0px 4px; font-style: italic; border-bottom: 1px dashed #aaaaaa; height: 19px;">Node</span>，<span style="font-weight: bold; margin: 0px 4px; font-style: italic; border-bottom: 1px dashed #aaaaaa; height: 19px;">游览器</span>，<span style="font-weight: bold; margin: 0px 4px; font-style: italic; border-bottom: 1px dashed #aaaaaa; height: 19px;">小程序</span>等环境上使用
</div>
</div>
<div style="margin: 20px 10px ; font-size: 15px; color: rgba(0, 0, 0, 0.3)">
<div style="color: rgba(0, 0, 0, 0.9); margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #eaecef;">待支持的 CSS 属性</div>
<div style="padding-left: 15px;">
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex</div>
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex-basis</div>
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex-direction</div>
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex-flow</div>
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex-grow</div>
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex-shrink</div>
<div style="position: relative;"><span style="position: absolute; width: 5px; height: 5px; background-color: #aaaaaa; top: 5px; left: -15px; border-radius: 2.5px;"></span>flex-wrap</div>
</div>
</div>
<div style="margin: 20px 10px ; font-size: 15px; color: rgba(0, 0, 0, 0.3)">
<div style="color: rgba(0, 0, 0, 0.9); margin-bottom: 10px; padding-bottom: 5px; border-bottom: 2px solid #eaecef;">已支持的 CSS 属性</div>
margin，margin-left，margin-top，margin-right，margin-bottom，padding，padding-left，padding-top，padding-right，padding-bottom，width，height，border，border-left，border-top，border-right，border-bottom，border-width，border-style，border-color，border-left-style，border-left-color，border-left-width，border-top-style，border-top-color，border-top-width，border-right-style，border-right-color，border-right-width，border-bottom-style，border-bottom-color，border-bottom-width，color，display，background-color，border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius，box-sizing，font，font-style，font-variant，font-weight，font-stretch，font-size，line-height，font-family，text-align，position，overflow，overflow-x，overflow-y，top，left，right，bottom，z-index
</div>
</div>