text: "use strict";(self.webpackChunkvuepress_blog=self.webpackChunkvuepress_blog||[]).push([[89742],{96930:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-24d0d8d3",path:"/typora/01frontEnd/05JavaScriptNewFeature/080canvas%E7%BB%98%E5%88%B6%E5%9C%86%E5%BC%A7.html",title:"80 canvas绘制圆弧",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[],filePathRelative:"typora/01frontEnd/05JavaScriptNewFeature/080canvas绘制圆弧.md",git:{updatedTime:1631527134e3}}},56731:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(36425).uE)('<h1 id="_80-canvas绘制圆弧" tabindex="-1"><a class="header-anchor" href="#_80-canvas绘制圆弧" aria-hidden="true">#</a> 80 canvas绘制圆弧</h1><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>16-Canvas绘制圆弧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">\n        <span class="token selector">*</span><span class="token punctuation">{</span>\n            <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>\n            <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>\n        <span class="token punctuation">}</span>\n        <span class="token selector">canvas</span><span class="token punctuation">{</span>\n            <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>\n            <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>\n            <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>\n        <span class="token punctuation">}</span>\n    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>400<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n    <span class="token comment">/*\n    1.基本概念(请翻开初中数学课本)\n    角度: 一个圆360度, 一个半圆是180度\n    弧度: 一个圆2π, 一个半圆π\n\n    2.角度转换弧度公式:\n    ∵ 180角度 = π弧度\n    ∴ 1角度 = π/180;\n    ∴ 弧度 = 角度 * π/180;\n       90角度 * π/180 = π/2\n\n    3.弧度转换角度公式:\n    ∵ π弧度 = 180角度\n    ∴ 1弧度 = 180/π\n    ∴ 角度 = 弧度 * 180/π\n       π/2 * 180/π = 180/2 = 90度\n    * */</span>\n    <span class="token comment">// 1.拿到canvas</span>\n    <span class="token keyword">let</span> oCanvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;canvas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token comment">// 2.从canvas中拿到绘图工具</span>\n    <span class="token keyword">let</span> oCtx <span class="token operator">=</span> oCanvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;2d&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token comment">/*\n    x, y: 确定圆心\n    radius: 确定半径\n    startAngle: 确定开始的弧度\n    endAngle: 确定结束的弧度\n    Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制\n    context.arc(x, y, radius, startAngle, endAngle, Boolean);\n    * */</span>\n    <span class="token comment">// oCtx.arc(100, 100, 100, 0, Math.PI);</span>\n    <span class="token comment">// oCtx.arc(100, 100, 100, 0, Math.PI, true);</span>\n    oCtx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    oCtx<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>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br></div></div>',2),t={render:function(n,s){return p}}}}]);