キャンバスの使い方
16405 ワード
今日はキャンバスの説明に来ましたが、キャンバスについてどれぐらい知っていますか?
彼はJavaScriptを使って絵を描いていますが、canvas元素自体は描画能力がありません.すべての描画作業はJavaScriptの内部で行わなければなりません.
キャンバスの流れは大体こんな感じです.
1、'まずキャンバスキャンバスを取得します.
2、2 dキャンバスを作成する.
3、スタート X.beginnPath()
4、座標の開始 X.moveTo(X,Y)
5、座標X.ラインTo(X,Y)を終了します.
4、移行X.straok()
5、終了X.closePath()
彼はJavaScriptを使って絵を描いていますが、canvas元素自体は描画能力がありません.すべての描画作業はJavaScriptの内部で行わなければなりません.
キャンバスの流れは大体こんな感じです.
1、'まずキャンバスキャンバスを取得します.
2、2 dキャンバスを作成する.
3、スタート X.beginnPath()
4、座標の開始 X.moveTo(X,Y)
5、座標X.ラインTo(X,Y)を終了します.
4、移行X.straok()
5、終了X.closePath()
： 1
2
3 "en">
4 "UTF-8">
5
<span style="color:#008080;"> 6</span>
<span style="color:#008080;"> 7</span>
<span style="color:#008080;"> 8</span> <canvas id="<span" style="color:#800000;">"<span style="color:#800000;">ca</span><span style="color:#800000;">"</span> width=<span style="color:#800000;">"</span><span style="color:#800000;">300px</span><span style="color:#800000;">"</span> height=<span style="color:#800000;">"</span><span style="color:#800000;">300px</span><span style="color:#800000;">"</span> style=<span style="color:#800000;">"</span><span style="color:#800000;">width:300px;height:300px;border: 1px solid black</span><span style="color:#800000;">"</span>></canvas><!--canvas【 】========== style */-->
<span style="color:#008080;"> 9</span> <script><span style="color:#008000;">//</span><span style="color:#008000;">=====
</span><span style="color:#008080;">10</span> <span style="color:#008000;">//</span><span style="color:#008000;"> 1、 </span>
<span style="color:#008080;">11</span> <span style="color:#0000ff;">var</span> ca=document.querySelector(<span style="color:#800000;">"</span><span style="color:#800000;">#ca</span><span style="color:#800000;">"</span><span style="color:#000000;">);
</span><span style="color:#008080;">12</span> w=ca.width;<span style="color:#008000;">//</span><span style="color:#008000;"> </span>
<span style="color:#008080;">13</span> h=ca.height;<span style="color:#008000;">//</span><span style="color:#008000;"> </span>
<span style="color:#008080;">14</span> <span style="color:#0000ff;">var</span> X=ca.getContext(<span style="color:#800000;">"</span><span style="color:#800000;">2d</span><span style="color:#800000;">"</span><span style="color:#000000;">);
</span><span style="color:#008080;">15</span> <span style="color:#0000ff;">for</span>(<span style="color:#0000ff;">var</span> i=<span style="color:#800080;">0</span>;i<<span style="color:#800080;">7</span>;i++<span style="color:#000000;">){
</span><span style="color:#008080;">16</span> <span style="color:#000000;"> X.beginPath();
</span><span style="color:#008080;">17</span> X.moveTo(h/<span style="color:#800080;">6</span>*i,<span style="color:#800080;">0</span><span style="color:#000000;">);
</span><span style="color:#008080;">18</span> X.lineTo(h/<span style="color:#800080;">6</span>*<span style="color:#000000;">i,w);
</span><span style="color:#008080;">19</span> <span style="color:#000000;"> X.stroke();
</span><span style="color:#008080;">20</span> X.strokeStyle=<span style="color:#800000;">'</span><span style="color:#800000;">red</span><span style="color:#800000;">'</span><span style="color:#000000;">;
</span><span style="color:#008080;">21</span> <span style="color:#000000;"> X.closePath();
</span><span style="color:#008080;">22</span>
<span style="color:#008080;">23</span> <span style="color:#000000;"> X.beginPath();
</span><span style="color:#008080;">24</span> X.moveTo(<span style="color:#800080;">0</span>,h/<span style="color:#800080;">6</span>*<span style="color:#000000;">i);
</span><span style="color:#008080;">25</span> X.lineTo(w,h/<span style="color:#800080;">6</span>*<span style="color:#000000;">i);
</span><span style="color:#008080;">26</span> <span style="color:#000000;"> X.stroke();
</span><span style="color:#008080;">27</span> X.strokeStyle=<span style="color:#800000;">"</span><span style="color:#800000;">yellow</span><span style="color:#800000;">"</span><span style="color:#000000;">;
</span><span style="color:#008080;">28</span> <span style="color:#000000;"> X.closePath();
</span><span style="color:#008080;">29</span> <span style="color:#000000;">}
</span><span style="color:#008080;">30</span> <span style="color:#000000;">X.beginPath();
</span><span style="color:#008080;">31</span> X.fillStyle=<span style="color:#800000;">"</span><span style="color:#800000;">red</span><span style="color:#800000;">"</span><span style="color:#000000;">;
</span><span style="color:#008080;">32</span> x.strokeStyle=<span style="color:#800000;">'</span><span style="color:#800000;">red</span><span style="color:#800000;">'</span><span style="color:#000000;">;
</span><span style="color:#008080;">33</span> X.moveTo(<span style="color:#800080;">10</span>,<span style="color:#800080;">10</span><span style="color:#000000;">);
</span><span style="color:#008080;">34</span> X.lineTo(<span style="color:#800080;">100</span>,<span style="color:#800080;">100</span><span style="color:#000000;">);
</span><span style="color:#008080;">35</span> X.lineTo(<span style="color:#800080;">10</span>,<span style="color:#800080;">100</span><span style="color:#000000;">);
</span><span style="color:#008080;">36</span> X.lineTo(<span style="color:#800080;">10</span>,<span style="color:#800080;">10</span><span style="color:#000000;">);
</span><span style="color:#008080;">37</span> <span style="color:#000000;">X.fill();
</span><span style="color:#008080;">38</span> <span style="color:#000000;">X.stroke();
</span><span style="color:#008080;">39</span> <span style="color:#000000;">X.closePath();
</span><span style="color:#008080;">40</span>
<span style="color:#008080;">41</span>
<span style="color:#008080;">42</span>
<span style="color:#008080;">43</span>
<span style="color:#008080;">44</span>
<span style="color:#008080;">45</span> </script>
<span style="color:#008080;">46</span>
<span style="color:#008080;">47</span> </code></pre>
</div>
<p> ：</p>
<div class="cnblogs_code">
<pre><code>
"<span style="color:#800000;">en</span><span style="color:#800000;">"</span>>
<meta charset="<span" style="color:#800000;"/>"<span style="color:#800000;">UTF-8</span><span style="color:#800000;">"</span>>
<title/>
<canvas width="<span" style="color:#800000;">"<span style="color:#800000;">300px</span><span style="color:#800000;">"</span> height=<span style="color:#800000;">"</span><span style="color:#800000;">300px</span><span style="color:#800000;">"</span> style=<span style="color:#800000;">"</span><span style="color:#800000;">border: 1px solid</span><span style="color:#800000;">"</span>></canvas>
<script>
<span style="color:#0000ff;">var</span> ca=document.querySelector(<span style="color:#800000;">"</span><span style="color:#800000;">canvas</span><span style="color:#800000;">"</span><span style="color:#000000;">);
</span><span style="color:#0000ff;">var</span> x=ca.getContext(<span style="color:#800000;">"</span><span style="color:#800000;">2d</span><span style="color:#800000;">"</span><span style="color:#000000;">);
x.beginPath();
</span><span style="color:#008000;">//</span><span style="color:#008000;"> </span>
x.fillStyle=<span style="color:#800000;">"</span><span style="color:#800000;">white</span><span style="color:#800000;">"</span><span style="color:#000000;">;
x.arc(</span><span style="color:#800080;">150</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">0</span>,<span style="color:#800080;">180</span>*Math.PI/<span style="color:#800080;">180</span>,<span style="color:#0000ff;">false</span><span style="color:#000000;">);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.fillStyle</span>=<span style="color:#800000;">"</span><span style="color:#800000;">black</span><span style="color:#800000;">"</span><span style="color:#000000;">;
x.arc(</span><span style="color:#800080;">150</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">0</span>,<span style="color:#800080;">180</span>*Math.PI/<span style="color:#800080;">180</span>,<span style="color:#0000ff;">true</span><span style="color:#000000;">);
x.fill();
x.stroke();
x.closePath();
</span><span style="color:#008000;">//</span><span style="color:#008000;"> </span>
<span style="color:#000000;"> x.beginPath();
x.restore(</span><span style="color:#800080;">90</span>*Math.PI/<span style="color:#800080;">180</span><span style="color:#000000;">);
x.fillStyle</span>=<span style="color:#800000;">"</span><span style="color:#800000;">black</span><span style="color:#800000;">"</span><span style="color:#000000;">;
x.arc(</span><span style="color:#800080;">76</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">75</span>,<span style="color:#800080;">0</span>,<span style="color:#800080;">180</span>*Math.PI/<span style="color:#800080;">180</span><span style="color:#000000;">);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.restore(</span><span style="color:#800080;">90</span>*Math.PI/<span style="color:#800080;">180</span><span style="color:#000000;">);
x.fillStyle</span>=<span style="color:#800000;">"</span><span style="color:#800000;">white</span><span style="color:#800000;">"</span><span style="color:#000000;">;
x.arc(</span><span style="color:#800080;">76</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">20</span>,<span style="color:#800080;">0</span>,<span style="color:#800080;">360</span>*Math.PI/<span style="color:#800080;">180</span><span style="color:#000000;">);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.fillStyle</span>=<span style="color:#800000;">"</span><span style="color:#800000;">white</span><span style="color:#800000;">"</span><span style="color:#000000;">;
x.arc(</span><span style="color:#800080;">227</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">75</span>,<span style="color:#800080;">0</span>,<span style="color:#800080;">180</span>*Math.PI/<span style="color:#800080;">180</span>,<span style="color:#0000ff;">true</span><span style="color:#000000;">);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.fillStyle</span>=<span style="color:#800000;">"</span><span style="color:#800000;">black</span><span style="color:#800000;">"</span><span style="color:#000000;">;
x.arc(</span><span style="color:#800080;">227</span>,<span style="color:#800080;">150</span>,<span style="color:#800080;">20</span>,<span style="color:#800080;">0</span>,<span style="color:#800080;">360</span>*Math.PI/<span style="color:#800080;">180</span><span style="color:#000000;">);
x.fill();
x.stroke();
x.closePath();
</span></script>
</code></pre>
</div>
<p> </p>
</div>
<p> :https://www.cnblogs.com/yhyanjin/p/7100885.html</p>
</div>
</div>
</div>
</div>