canvas绘制圆形进度条_小程序圆形进度条怎么做 - wpsshop博客

查看

编辑修改

首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS

小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article

热门文章

1十分钟教你部署一个属于自己的chatgpt网站-（源码）_gpt套壳网站源码
2javaee互联网轻量级框架整合开发_为什么越来越多的开发者选择使用Spring Boot？...
3pgsql在insert时自动生成uuid_pgsql systemuuid insert into
4DC、CDC及CDC的各个子类_cdc类的子类
5网易汪源：网易产品体验好，离不开AI驱动_汪源网易
6textarea maxlength属性_</li><li><b class="black">7</b><a title="VS code 可视化调试Linux kernel内核_vs code 查看linux 内核" href="/w/不正经/article/detail/239868" target="_blank">VS code 可视化调试Linux kernel内核_vs code 查看linux 内核</a></li><li><b class="black">8</b><a title="uplift model的理论与实践_uplift 实践" href="/w/花生_TL007/article/detail/238810" target="_blank">uplift model的理论与实践_uplift 实践</a></li><li><b class="black">9</b><a title="图的最小生成树算法_如何从图得到最小生成树" href="/w/花生_TL007/article/detail/243427" target="_blank">图的最小生成树算法_如何从图得到最小生成树</a></li><li><b class="black">10</b><a title="spring boot 防止表单重复提交(幂等性)_@repeatsubmit不生效" href="/w/你好赵伟/article/detail/234415" target="_blank">spring boot 防止表单重复提交(幂等性)_@repeatsubmit不生效</a></li></ul></div></div></div><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/mid_detail.css?v=890" type="text/css"><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/mid_clk.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/blog/js/mid_.js?v=890"></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/study/js/j/vs.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/study/js/j/highlight.pack.js?v=890" ></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/index_contenthljs.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/wpsshopindex/js/detail01tj.js?v=531890" ></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/wpsshopindex/css/mid_detail_last.css?v=3890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/wpsshopindex/js/mid_detail_last.js?v=33890"></script><style type="text/css"></style><script type="text/javascript"></script><div class="interactive_info" id="body-data-0098" attrv="69482"></div><div class="article_box" style="overflow: hidden;"><div class="article_channel"><div class="channel_top_line"><div class="cn_t_l"></div><div class="cn_t_r"></div></div><div class="article_channel_info">当前位置: <a href="/article/list/1">article</a> > 正文 </div></div><div class="article_title"><h1>canvas绘制圆形进度条_小程序圆形进度条怎么做</h1></div><div class="article_info"><div class="article_c_info"> 作者：小丑西瓜9 | 2024-03-20 00:51:51</div><div class="article_click" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div class="article_intro">小程序圆形进度条怎么做</div><div class="article_content article_contentheight"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css"> <div id="content_views" class="markdown_views prism-atom-one-dark"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <h2><a name="t0"></a><a id="canvas_1"></a>canvas绘制圆形进度条</h2> <p>用canvas绘制了一个圆形进度条，记录一下：<br> 效果如下：<img src="https://img-blog.csdnimg.cn/direct/85c8fa01897d4c078b7741cd8f137906.gif#pic_center" alt="请添加图片描述"></p> <p>感觉效果还行，不过有待优化<br> 代码如下：<br> 我是用<a href="https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"Vue\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"Vue\"}"}" data-tit="Vue" data-pretit="vue">Vue</a>写的</p> <p>组件的代码：</p> <p>progressCanvas.vue</p> <pre data-index="0" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>canvas id<span class="token operator">=</span><span class="token string">"progressCanvas"</span> width<span class="token operator">=</span><span class="token string">"200"</span> height<span class="token operator">=</span><span class="token string">"200"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>canvas<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'ProgressCanvas'</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">drawPgress</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> aa <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">drawProgress</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>drawPgress <span class="token operator">+=</span> <span class="token number">0.01</span><span class="token punctuation">)</span> <span class="token comment">// 传入一个0到1之间的数字来表示进度</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>drawPgress <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>aa<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token comment">// this.drawProgress(0.8)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">drawProgress</span><span class="token punctuation">(</span><span class="token parameter">progress</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'progressCanvas'</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>getContext<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> x <span class="token operator">=</span> canvas<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2</span> <span class="token keyword">const</span> y <span class="token operator">=</span> canvas<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2</span> <span class="token keyword">const</span> radius <span class="token operator">=</span> <span class="token number">90</span> <span class="token keyword">const</span> startAngle <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">0.5</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token comment">// 从顶部开始</span> <span class="token keyword">const</span> endAngle <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">0.5</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">*</span> progress<span class="token punctuation">)</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token comment">// 清除画布</span> ctx<span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span> canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span> <span class="token comment">// 绘制圆形进度条背景</span> ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span> ctx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> radius<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> ctx<span class="token punctuation">.</span>lineWidth <span class="token operator">=</span> <span class="token number">10</span> ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> <span class="token string">'#5D52E1'</span> ctx<span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 计算渐变色的起始和结束坐标</span> <span class="token keyword">const</span> gradientStartX <span class="token operator">=</span> x <span class="token operator">+</span> radius <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span>startAngle<span class="token punctuation">)</span> <span class="token keyword">const</span> gradientStartY <span class="token operator">=</span> y <span class="token operator">+</span> radius <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span>startAngle<span class="token punctuation">)</span> <span class="token keyword">const</span> gradientEndX <span class="token operator">=</span> x <span class="token operator">+</span> radius <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span>endAngle<span class="token punctuation">)</span> <span class="token keyword">const</span> gradientEndY <span class="token operator">=</span> y <span class="token operator">+</span> radius <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span>endAngle<span class="token punctuation">)</span> <span class="token comment">// 创建渐变色</span> <span class="token keyword">const</span> gradient <span class="token operator">=</span> ctx<span class="token punctuation">.</span><span class="token function">createLinearGradient</span><span class="token punctuation">(</span>gradientStartX<span class="token punctuation">,</span> gradientStartY<span class="token punctuation">,</span> gradientEndX<span class="token punctuation">,</span> gradientEndY<span class="token punctuation">)</span> gradient<span class="token punctuation">.</span><span class="token function">addColorStop</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'#5D52E1'</span><span class="token punctuation">)</span> gradient<span class="token punctuation">.</span><span class="token function">addColorStop</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'#FFFFFF'</span><span class="token punctuation">)</span> <span class="token comment">// 绘制圆形进度条</span> ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span> ctx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> radius<span class="token punctuation">,</span> startAngle<span class="token punctuation">,</span> endAngle<span class="token punctuation">)</span> ctx<span class="token punctuation">.</span>lineWidth <span class="token operator">=</span> <span class="token number">10</span> ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> gradient ctx<span class="token punctuation">.</span><span class="token function">stroke</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>style lang<span class="token operator">=</span><span class="token string">"scss"</span> scoped<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li></ul></pre> <p>OK，实现完毕！如果大家有什么更好的想法可以交流一下</p> </div><div data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/weixin_45641191/article/details/136671508","extend1":"pc","ab":"new"}"><div></div></div> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet"> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet"> <div><div><span>声明：</span>本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：<a href="https://www.wpsshop.cn/w/小丑西瓜9/article/detail/269482">https://www.wpsshop.cn/w/小丑西瓜9/article/detail/269482</a></div></div></div><div class="article_recommend"><div class="list_top">推荐阅读</div><div class="ListItems"><ul class="NewsList"><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="npm报错：These dependencies were not found:* canvas i" href="/w/2023面试高手/article/detail/250801" target="_blank"><em>npm</em>报错：These <em>d</em>epen<em>d</em>encies were not foun<em>d</em>:* <em>canvas</em> i...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="npm报错：These dependencies were not found:* canvas i" href="/w/2023面试高手/article/detail/250801" target="_blank">These <em>d</em>epen<em>d</em>encies were not foun<em>d</em>:* <em>canvas</em> in ./<em>no<em>d</em>e</em>_<em>mo<em>d</em>ules</em>... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="微信小程序使用canvas画圆环进度条_小程序createcanvascontext 基础库版本 2" href="/w/2023面试高手/article/detail/254296" target="_blank">微信小<em>程序</em><em>使用</em><em>canvas</em>画<em>圆环</em><em>进度条</em>_小<em>程序</em>create<em>canvas</em>context 基础库版本 2...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="微信小程序使用canvas画圆环进度条_小程序createcanvascontext 基础库版本 2" href="/w/2023面试高手/article/detail/254296" target="_blank">微信小<em>程序</em><em>使用</em><em>canvas</em>画<em>圆环</em><em>进度条</em>1、代码参考：https://segmentfault.com/a/1190000... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="canvas 闭合_利用 Canvas实现绘画一个未闭合的带进度条的圆环" href="/w/小小林熬夜学编程/article/detail/254327" target="_blank"><em>canvas</em> <em>闭合</em>_利用 <em>Canvas</em>实现绘画<em>一个</em>未<em>闭合</em>的带<em>进度条</em>的<em>圆环</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="canvas 闭合_利用 Canvas实现绘画一个未闭合的带进度条的圆环" href="/w/小小林熬夜学编程/article/detail/254327" target="_blank">最终效果图一、定义变量定义半径，定义<em>圆环</em>厚度，定义圆心位置、定义默认填充颜色let radius = 75let thi... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="canvas 画半圆的两种方式" href="/w/羊村懒王/article/detail/254337" target="_blank"><em>canvas</em> 画<em>半圆</em>的<em>两种</em>方式...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="canvas 画半圆的两种方式" href="/w/羊村懒王/article/detail/254337" target="_blank"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="canvas 2D炫酷动效的实现套路和需要的技术积累_canvas动效" href="/w/AllinToyou/article/detail/254370" target="_blank"><em>canvas</em> 2D炫酷<em>动效</em><em>的</em><em>实现</em><em>套路</em>和<em>需要</em><em>的</em>技术积累_<em>canvas</em><em>动效</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="canvas 2D炫酷动效的实现套路和需要的技术积累_canvas动效" href="/w/AllinToyou/article/detail/254370" target="_blank">一、放在开头<em>的</em>结束语我上学时候，06，07年<em>的</em>样子，总是情不自禁被炫酷<em>的</em>flash<em>动效</em>吸引。印象很深<em>的</em>是一个一堆线和球连... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="canvas-绘制圆形_canvas画圆" href="/w/IT小白/article/detail/254380" target="_blank"><em>canvas</em>-<em>绘制</em>圆形<em>_</em><em>canvas</em>画圆...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="canvas-绘制圆形_canvas画圆" href="/w/IT小白/article/detail/254380" target="_blank">角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。<em>canvas</em><em>绘制</em>圆形arc(x, y... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="android canvas 画圆,canvas-圆的绘制" href="/w/羊村懒王/article/detail/254382" target="_blank"><em>android</em> <em>canvas</em> 画<em>圆</em>,<em>canvas</em>-<em>圆</em>的绘制...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="android canvas 画圆,canvas-圆的绘制" href="/w/羊村懒王/article/detail/254382" target="_blank"><em>圆</em>可以在数据可视化中作为饼状图基础图形，也是在<em>canvas</em>中必不可少的图形语法：ctx.arc(x, y, radius... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="【Canvas】画布，画圆、背景以及生成图片_用canvas画圆并且添加不同的颜色" href="/w/你好赵伟/article/detail/254388" target="_blank">【<em>Canvas</em>】画布，<em>画圆</em>、背景以及生成<em>图片</em>_用<em>canvas</em><em>画圆</em>并且添加不同<em>的</em><em>颜色</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="【Canvas】画布，画圆、背景以及生成图片_用canvas画圆并且添加不同的颜色" href="/w/你好赵伟/article/detail/254388" target="_blank">【<em>Canvas</em>】画布，<em>画圆</em>、背景以及生成<em>图片</em>_用<em>canvas</em><em>画圆</em>并且添加不同<em>的</em><em>颜色</em>用<em>canvas</em><em>画圆</em>并且添加不同<em>的</em><em>颜色</em> ... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Canvas三种动态画圆实现方法说明_js canvas 画圆" href="/w/繁依Fanyi0/article/detail/254401" target="_blank"><em>Canvas</em>三种<em>动态</em><em>画圆</em>实现<em>方法</em>说明_js <em>canvas</em> <em>画圆</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Canvas三种动态画圆实现方法说明_js canvas 画圆" href="/w/繁依Fanyi0/article/detail/254401" target="_blank">前言<em>canvas</em>是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用<em>canvas</em>配合JavaScript来... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="canvas 两个圆相交重叠区域颜色填充_前端之canvas详解（二）——圆和矩形的画法..." href="/w/Monodyee/article/detail/254417" target="_blank"><em>canvas</em> <em>两个</em><em>圆</em>相交<em>重叠</em>区域<em>颜色</em>填充<em>_</em>前端之<em>canvas</em>详解（二）——<em>圆</em>和矩形的画法<em>...</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="canvas 两个圆相交重叠区域颜色填充_前端之canvas详解（二）——圆和矩形的画法..." href="/w/Monodyee/article/detail/254417" target="_blank">一、用<em>canvas</em>画<em>圆</em>弧用<em>canvas</em>画<em>圆</em>弧画<em>圆</em>弧有两种方法：1、arc(x, y, r, startAngle, en... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="vue3中使用canvas_vue3 canvas" href="/w/凡人多烦事01/article/detail/254438" target="_blank"><em>vue3</em>中使用<em>canvas</em>_<em>vue3</em> <em>canvas</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="vue3中使用canvas_vue3 canvas" href="/w/凡人多烦事01/article/detail/254438" target="_blank">使用<em>canvas</em>通过ref和dom方式画圆、直线、箭头、文字_<em>vue3</em> <em>canvas</em><em>vue3</em> <em>canvas</em> ... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Android绘制之Canvas_android canvas.drawcolor()" href="/w/小小林熬夜学编程/article/detail/254447" target="_blank"><em>Android</em><em>绘制</em>之<em>Canvas</em>_<em>android</em> <em>canvas</em>.<em>drawcolor</em>()...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Android绘制之Canvas_android canvas.drawcolor()" href="/w/小小林熬夜学编程/article/detail/254447" target="_blank">我们经常在一个view上<em>绘制</em>一些图像或者形状的时候，都是使用<em>canvas</em>来实现的。我们可以在view中的onDraw方法... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Canvas(画布)的使用_canvas画布背景颜色" href="/w/知新_RL/article/detail/254456" target="_blank"><em>Canvas</em>(<em>画布</em>)的<em>使用</em>_<em>canvas</em><em>画布</em>背景<em>颜色</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Canvas(画布)的使用_canvas画布背景颜色" href="/w/知新_RL/article/detail/254456" target="_blank"><em>Canvas</em>提供了如下一些方法： <em>Canvas</em>():创建一个空的<em>画布</em>，可以<em>使用</em>setBitmap()方法来设置绘制的具体... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Android高级UI进阶之路(五) —— Canvas详解_android canvas 事件" href="/w/AllinToyou/article/detail/254481" target="_blank"><em>Android</em><em>高级</em>UI进阶之路(五) —— <em>Canvas</em>详解_<em>android</em> <em>canvas</em> 事件...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Android高级UI进阶之路(五) —— Canvas详解_android canvas 事件" href="/w/AllinToyou/article/detail/254481" target="_blank">上一篇文章介绍了 Paint 的 API 和Paint <em>高级</em>使用，下面再来讲讲有关 <em>Canvas</em> 绘图的知识，Canva... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Android Canvas绘图描述Android Canvas 方法总结_android can" href="/w/盐析白兔/article/detail/254488" target="_blank"><em>Android</em> <em>Canvas</em>绘图描述<em>Android</em> <em>Canvas</em> 方法总结_<em>android</em> can...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Android Canvas绘图描述Android Canvas 方法总结_android can" href="/w/盐析白兔/article/detail/254488" target="_blank"><em>Android</em>中使用图形处理引擎，2D部分是<em>android</em> SDK内部自己提供，3D部分是用Open GL ES 1.0... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Canvas 透明画布透明View 透明遮罩设置_canvas.drawcolor(color.t" href="/w/凡人多烦事01/article/detail/254493" target="_blank">Canvas 透明画布透明View 透明遮罩设置_<em>canvas</em>.draw<em>color</em>(<em>color</em>.t...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Canvas 透明画布透明View 透明遮罩设置_canvas.drawcolor(color.t" href="/w/凡人多烦事01/article/detail/254493" target="_blank">//创建透明画布 <em>canvas</em>.drawColor(Color.TRANSPARENT, PorterDuff.Mo... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Android Canvas的使用_android canvas.drawcolor" href="/w/Gausst松鼠会/article/detail/254500" target="_blank">Android <em>Canvas</em>的使用_<em>android</em> <em>canvas</em>.<em>drawcolor</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Android Canvas的使用_android canvas.drawcolor" href="/w/Gausst松鼠会/article/detail/254500" target="_blank">一般在自定义View中，重写 onDraw(<em>Canvas</em> <em>canvas</em>) 方法时用到。_<em>android</em> <em>canvas</em>.d... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="【Android 自定义 View】Canvas （画布）的基本使用_view 与canva" href="/w/小蓝xlanll/article/detail/254505" target="_blank">【Android <em>自定义</em> <em>View</em>】<em>Canvas</em> （画布）的基本使用_<em>view</em> 与<em>canva</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="【Android 自定义 View】Canvas （画布）的基本使用_view 与canva" href="/w/小蓝xlanll/article/detail/254505" target="_blank">本文将全面介绍：<em>Canvas</em>.drawXXX() 系列方法及 Paint 最基本的使用_<em>view</em> 与<em>canva</em><em>view</em> ... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="android canvas 绘图一闪一闪_Android-View的孪生兄弟---Surface" href="/w/盐析白兔/article/detail/254509" target="_blank"><em>android</em> <em>canvas</em> <em>绘图</em> 一闪一闪_<em>Android</em>-<em>View</em>的孪生兄弟---Surface...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="android canvas 绘图一闪一闪_Android-View的孪生兄弟---Surface" href="/w/盐析白兔/article/detail/254509" target="_blank">Surface<em>View</em>入门为什么使用Surface<em>View</em><em>Android</em>已经提供了<em>View</em><em>绘图</em>处理，<em>View</em>可以满足大部... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="android 自定义view，绘制与onTouchEvent事件（一）_android canva" href="/w/繁依Fanyi0/article/detail/254512" target="_blank"><em>android</em> 自定义<em>view</em>，绘制与<em>onTouchEvent</em>事件（一）_<em>android</em> canva...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="android 自定义view，绘制与onTouchEvent事件（一）_android canva" href="/w/繁依Fanyi0/article/detail/254512" target="_blank">绘制构造方法自定义<em>view</em>需要继承View类，重写两个构造方法 //用在代码new该<em>view</em>对象，初始化 public ... </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li></ul><div class="list_tools_top">相关标签</div><div class="list_tools_box"><ul><li><a title="npm" rel="nofollow" href="/s?w=npm" target="_self">npm</a></li><li><a title="pdf" rel="nofollow" href="/s?w=pdf" target="_self">pdf</a></li><li><a title="javascript" rel="nofollow" href="/s?w=javascript" target="_self">javascript</a></li><li><a title="前端" rel="nofollow" href="/s?w=前端" target="_self">前端</a></li><li><a title="node.js" rel="nofollow" href="/s?w=node.js" target="_self">node.js</a></li><li><a title="小程序" rel="nofollow" href="/s?w=小程序" target="_self">小程序</a></li><li><a title="canvas 闭合" rel="nofollow" href="/s?w=canvas 闭合" target="_self">canvas 闭合</a></li><li><a title="c#" rel="nofollow" href="/s?w=c#" target="_self">c#</a></li><li><a title="ViewUI" rel="nofollow" href="/s?w=ViewUI" target="_self">ViewUI</a></li><li><a title="canvas" rel="nofollow" href="/s?w=canvas" target="_self">canvas</a></li><li><a title="android canvas 画圆" rel="nofollow" href="/s?w=android canvas 画圆" target="_self">android canvas 画圆</a></li><li><a title="动态画圆" rel="nofollow" href="/s?w=动态画圆" target="_self">动态画圆</a></li><li><a title="进度条" rel="nofollow" href="/s?w=进度条" target="_self">进度条</a></li><li><a title="canvas 两个圆相交重叠区域颜色填充" rel="nofollow" href="/s?w=canvas 两个圆相交重叠区域颜色填充" target="_self">canvas 两个圆相交重叠区域颜色填充</a></li><li><a title="vue.js" rel="nofollow" href="/s?w=vue.js" target="_self">vue.js</a></li><li><a title="android" rel="nofollow" href="/s?w=android" target="_self">android</a></li><li><a title="Canvas" rel="nofollow" href="/s?w=Canvas" target="_self">Canvas</a></li><li><a title="自定义View" rel="nofollow" href="/s?w=自定义View" target="_self">自定义View</a></li><li><a title="画布" rel="nofollow" href="/s?w=画布" target="_self">画布</a></li><li><a title="绘图" rel="nofollow" href="/s?w=绘图" target="_self">绘图</a></li><li><a title="Android Canvas绘图描述Android Can" rel="nofollow" href="/s?w=Android Canvas绘图描述Android Can" target="_self">Android Canvas绘图描述Android Can</a></li><div style="clear: both;"></div></ul></div><div class="list_tools_top"></div></div></div></div><style type="text/css"></style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/phone.css?v=17352890" type="text/css"><script type="text/javascript"></script></div></div></div></div></div></div><style type="text/css"> /* footer css */ .index006-cover-page-foot { background-color: #F7F7F7; } </style><div class="cppui-row-1_100 cppui-row-view-1 row_1_100 ui-draggable" style="display: block;"><div class="cppui-column-1_100-0-1 column-view-com cppui-column-1_100-0-view-1 ui-sortable"><div class="drag-item-show-view-1 footermsg_view_pic ui-draggable" style="display: block;"><div class="index006-cover-page-foot drag-item-hide-view-1"><p class="copyright">Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。 </p><div style="background-color:#F7F7F7; text-align:center; height:20px;padding-top:5px;"><a target="_blank" href="#" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdnimages.wpsshop.cn/57public/skin/index/default/ui/images/beian_ghs.png" style="float:left;"> <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">闽ICP备14008679号</p></a> <a href="https://www.wpsshop.cn/xml/w/%E5%B0%8F%E4%B8%91%E8%A5%BF%E7%93%9C9/article/detail/269482.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a> <a href="/xml/w/g007/article/detail/new.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a> <a href="/site.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a></div></div></div></div></div><script type="text/javascript">var domain = document.domain;var hr=encodeURIComponent(window.location.href+'=='+document.referrer); document.write('<script src="https://ad.wpsshop.cn/admin.appflux?s=ad_flu_ind&fluxuserauto=yes&hr='+hr+'&p57weburl='+domain+'&p57usercode1='+domain+'&u=Vy1RJQhqAXUEMQNnAm0HaVVu&i='+p57ref("id")+'&r='+escape(document.referrer)+'" language="JavaScript"><\/script>');function p57ref(id){var reg=new RegExp("(^|&)"+id+"=([^&]*)(&|$)");var ref=window.location.search.substr(1).match(reg);if(ref!=null)return unescape(ref[2]);return null;} </script></body></html>