-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas学习笔记.html
241 lines (162 loc) · 20.6 KB
/
canvas学习笔记.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas学习笔记 | tracy木子</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="引子最近接到这么个需求，做一个图片分享的功能，将页面的内容，通过图片的方式分享给用户。在网上搜索了下对于图片处理的相关资料，对比了下，在前端采用 base64 图片处理技术，会比在服务端处理要来的快、用户体验较好。这时候，就需要使用 canvas 绘制来绘制页面，这样才能讲图片转为 base64 的格式。
图片 base64 编码：将一张图片数据编码成一串字符串，使用该字符串代替图像地址。好处：图">
<meta property="og:type" content="article">
<meta property="og:title" content="canvas学习笔记">
<meta property="og:url" content="http://tracylyx.github.io/canvas学习笔记.html">
<meta property="og:site_name" content="tracy木子">
<meta property="og:description" content="引子最近接到这么个需求，做一个图片分享的功能，将页面的内容，通过图片的方式分享给用户。在网上搜索了下对于图片处理的相关资料，对比了下，在前端采用 base64 图片处理技术，会比在服务端处理要来的快、用户体验较好。这时候，就需要使用 canvas 绘制来绘制页面，这样才能讲图片转为 base64 的格式。
图片 base64 编码：将一张图片数据编码成一串字符串，使用该字符串代替图像地址。好处：图">
<meta property="og:updated_time" content="2016-12-23T10:34:25.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="canvas学习笔记">
<meta name="twitter:description" content="引子最近接到这么个需求，做一个图片分享的功能，将页面的内容，通过图片的方式分享给用户。在网上搜索了下对于图片处理的相关资料，对比了下，在前端采用 base64 图片处理技术，会比在服务端处理要来的快、用户体验较好。这时候，就需要使用 canvas 绘制来绘制页面，这样才能讲图片转为 base64 的格式。
图片 base64 编码：将一张图片数据编码成一串字符串，使用该字符串代替图像地址。好处：图">
<link rel="alternate" href="/atom.xml" title="tracy木子" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">tracy木子</a>
</h1>
<h2 id="subtitle-wrap">
<a href="/" id="subtitle">博客小站</a>
</h2>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Zoeken"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://tracylyx.github.io"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main"><article id="post-canvas学习笔记" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/canvas学习笔记.html" class="article-date">
<time datetime="2016-12-22T09:59:59.000Z" itemprop="datePublished">2016-12-22</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 class="article-title" itemprop="name">
canvas学习笔记
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<h4 id="引子"><a href="#引子" class="headerlink" title="引子"></a>引子</h4><p>最近接到这么个需求，做一个图片分享的功能，将页面的内容，通过图片的方式分享给用户。<br>在网上搜索了下对于图片处理的相关资料，对比了下，在前端采用 base64 图片处理技术，会比在服务端处理要来的快、用户体验较好。这时候，就需要使用 canvas 绘制来绘制页面，这样才能讲图片转为 base64 的格式。</p>
<p>图片 base64 编码：将一张图片数据编码成一串字符串，使用该字符串代替图像地址。<br>好处：图片的下载无需再向服务发出请求，可以随着 html 的下载同时下载到本地</p>
<a id="more"></a>
<h4 id="如何使用-canvas-提供的-API"><a href="#如何使用-canvas-提供的-API" class="headerlink" title="如何使用 canvas 提供的 API"></a>如何使用 canvas 提供的 API</h4><p>你需要获取 canvas 画布，其次你需要获取画布的上下文 2d 对象<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">// html</div><div class="line"><span class="tag"><<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"draw"</span>></span><span class="tag"></<span class="name">canvas</span>></span></div></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// javascript</span></div><div class="line"><span class="keyword">var</span> canvas = <span class="built_in">document</span>.getElementById(<span class="string">'draw'</span>);</div><div class="line"><span class="keyword">var</span> context = canvas.getContext(<span class="string">'2d'</span>);</div></pre></td></tr></table></figure>
<h4 id="文本绘制"><a href="#文本绘制" class="headerlink" title="文本绘制"></a>文本绘制</h4><p>文本内容，文本放置在画布上的坐标信息<br>context.fillText(text, x, y);<br>设置文本的大小、字体等<br>context.font<br>设置文本的对齐方式<br>context.textAlign<br>设置文本的填充颜色<br>context.fillStyle<br>设置文本的边框颜色<br>context.strokeStyle</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">writeText: <span class="function"><span class="keyword">function</span> (<span class="params">text, context, x, y, options</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (!text || !context || <span class="keyword">typeof</span> x !== <span class="string">'number'</span> || <span class="keyword">typeof</span> y !== <span class="string">'number'</span>) {</div><div class="line"> <span class="built_in">console</span>.warn(<span class="string">'确认：文本内容 或 画布对象 或 坐标信息是否正确传入'</span>);</div><div class="line"></div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> options = !options ? {} : options;</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (options.font) {ss</div><div class="line"> context.font = options.font;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (options.textAlign) {</div><div class="line"> context.textAlign = options.textAlign;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (options.fillStyle) {</div><div class="line"> context.fillStyle = options.fillStyle;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (options.strokeStyle) {</div><div class="line"> context.strokeStyle = options.strokeStyle;</div><div class="line"> }</div><div class="line"></div><div class="line"> context.fillText(text, x, y);</div><div class="line"> }</div></pre></td></tr></table></figure>
<h4 id="图形路径"><a href="#图形路径" class="headerlink" title="图形路径"></a>图形路径</h4><p>绘制圆形<br>context.arc(x, y, r, 弧度1, 弧度2, 是否逆时针); counterclockwise 是否逆时针<br>角度 -> 弧度：Math.PI <em> 0 0度<br> Math.PI </em> 1.5 90度<br> Math.PI * 2 360度</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">lineCiecles: <span class="function"><span class="keyword">function</span> (<span class="params">canvas, context, x, y, r, options</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (!context || !canvas) {</div><div class="line"> <span class="built_in">console</span>.warn(<span class="string">'确认：画布相关信息是否正确传入'</span>);</div><div class="line"></div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> x !== <span class="string">'number'</span> || <span class="keyword">typeof</span> y !== <span class="string">'number'</span> || <span class="keyword">typeof</span> r !== <span class="string">'number'</span>) {</div><div class="line"> <span class="built_in">console</span>.warn(<span class="string">'确认：绘制圆形的信息是否正确传入'</span>);</div><div class="line"></div><div class="line"> <span class="keyword">return</span>;</div><div class="line"> }</div><div class="line"></div><div class="line"> options = !options ? {} : options;</div><div class="line"></div><div class="line"> <span class="keyword">var</span> canvasHalfWidth = canvas.width / <span class="number">2</span>,</div><div class="line"> lineLength = (canvasHalfWidth - (x + r)) * <span class="number">2</span>;</div><div class="line"></div><div class="line"> context.beginPath(); <span class="comment">// 开始路径</span></div><div class="line"> context.arc(x, y, r, <span class="number">0</span>, <span class="number">2</span>*<span class="built_in">Math</span>.PI); <span class="comment">// 绘制圆形</span></div><div class="line"> context.fillStyle = options.fillStyle; <span class="comment">// 圆形的填充色</span></div><div class="line"> context.fill(); <span class="comment">// 填充的动作</span></div><div class="line"> context.beginPath(); <span class="comment">// 开始另外一个路径的同时，结束了刚才那个路径</span></div><div class="line"> context.moveTo(x + r, y); <span class="comment">// 路径开始的点</span></div><div class="line"> context.lineTo(lineLength, y); <span class="comment">// 到达另外一个点</span></div><div class="line"> context.stroke(); <span class="comment">// 描边</span></div><div class="line"> context.arc(lineLength + r, y, r, <span class="number">0</span>, <span class="number">2</span>*<span class="built_in">Math</span>.PI);</div><div class="line"> context.fill();</div><div class="line"> }</div></pre></td></tr></table></figure>
<h4 id="图像处理"><a href="#图像处理" class="headerlink" title="图像处理"></a>图像处理</h4><p>img 图片对象<br>var img = new Image();<br>img.src = src;<br>x, y 表示放置这张图片的坐标点<br>context.drawImage(img, x, y);</p>
<p>【推荐阅读】<br>canvas 参考手册：<a href="http://www.w3school.com.cn/tags/html_ref_canvas.asp" target="_blank" rel="external">http://www.w3school.com.cn/tags/html_ref_canvas.asp</a></p>
</div>
<footer class="article-footer">
<a data-url="http://tracylyx.github.io/canvas学习笔记.html" data-id="cjishsrx400019zuj3dy23sf7" class="article-share-link">Delen</a>
<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/canvas/">canvas</a></li></ul>
</footer>
</div>
<nav id="article-nav">
<a href="/如何将md文件保存为PDF.html" id="article-nav-newer" class="article-nav-link-wrap">
<strong class="article-nav-caption">Nieuwer</strong>
<div class="article-nav-title">
md文件和PDF
</div>
</a>
<a href="/JavaScript中的错误处理.html" id="article-nav-older" class="article-nav-link-wrap">
<strong class="article-nav-caption">Ouder</strong>
<div class="article-nav-title">JavaScript中的错误处理</div>
</a>
</nav>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Labels</h3>
<div class="widget">
<ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/">ES6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6标准入门（第三版）/">ES6标准入门（第三版）</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ReactNative/">ReactNative</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Router/">Router</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/SEO/">SEO</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/canvas/">canvas</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/const/">const</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css/">css</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/gulp/">gulp</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/let/">let</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mongoDB/">mongoDB</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端构建工具/">前端构建工具</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/叽叽喳喳/">叽叽喳喳</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/基础知识/">基础知识</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/类图/">类图</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/踩过的坑/">踩过的坑</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div class="widget tagcloud">
<a href="/tags/ES6/" style="font-size: 10px;">ES6</a> <a href="/tags/ES6标准入门（第三版）/" style="font-size: 10px;">ES6标准入门（第三版）</a> <a href="/tags/JavaScript/" style="font-size: 10px;">JavaScript</a> <a href="/tags/React/" style="font-size: 20px;">React</a> <a href="/tags/ReactNative/" style="font-size: 10px;">ReactNative</a> <a href="/tags/Router/" style="font-size: 10px;">Router</a> <a href="/tags/SEO/" style="font-size: 10px;">SEO</a> <a href="/tags/canvas/" style="font-size: 10px;">canvas</a> <a href="/tags/const/" style="font-size: 10px;">const</a> <a href="/tags/css/" style="font-size: 10px;">css</a> <a href="/tags/gulp/" style="font-size: 10px;">gulp</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/html/" style="font-size: 20px;">html</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/let/" style="font-size: 10px;">let</a> <a href="/tags/mongoDB/" style="font-size: 10px;">mongoDB</a> <a href="/tags/前端构建工具/" style="font-size: 10px;">前端构建工具</a> <a href="/tags/叽叽喳喳/" style="font-size: 10px;">叽叽喳喳</a> <a href="/tags/基础知识/" style="font-size: 10px;">基础知识</a> <a href="/tags/类图/" style="font-size: 10px;">类图</a> <a href="/tags/踩过的坑/" style="font-size: 10px;">踩过的坑</a>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Archieven</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">October 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">August 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">April 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">December 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/11/">November 2016</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recente berichten</h3>
<div class="widget">
<ul>
<li>
<a href="/JS中的各种height、width.html">JS中的各种height、width</a>
</li>
<li>
<a href="/【笔记】let和const命令.html">【笔记】let和const命令</a>
</li>
<li>
<a href="/我需要给站点做SEO.html">我需要给站点做SEO</a>
</li>
<li>
<a href="/开发过程中遇到的坑坑洼洼.html">开发过程中遇到的坑坑洼洼</a>
</li>
<li>
<a href="/UML类图相关基础知识点.html">UML类图相关基础知识点</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2018 John Doe<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>