HTML5 연구 노트: 캔버스

1.캔버스란 무엇인가요?

그래픽을 그릴 수 있는 라벨입니다. 일반적으로 자바스크립트로 그려집니다.

2. 캔버스 만들기

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">canvas </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="mycanvas"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="100"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">canvas</span><span style="color: #0000ff;">> //创建画布用canvas标签</span>
<span style="color: #008080;">8</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

3. 캔버스에 그립니다.

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">用javascript来绘制图像</span>
<span style="color: #008080;"> 3</span>     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">获取到canvas元素</span>
<span style="color: #008080;"> 4</span>     <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> can</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">mycanvas</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
</span><span style="color: #008080;"> 5</span>     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">创建html5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</span>
<span style="color: #008080;"> 6</span>     <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> draw</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">can.getContext(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">2d</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
</span><span style="color: #008080;"> 7</span>     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">fillStyle();可以是css的颜色，渐变，图案</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #000000;">    draw.fillStyle</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">red</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;"> 9</span>     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">fillRect(x,y,width,height) 定义填充方式</span>
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #000000;">    draw.fillRect(</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">125</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">12</span><span style="background-color: #f5f5f5; color: #000000;">);</span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>

4.캔버스 경로

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">var</span> can=document.getElementById("mycanvas"<span style="color: #000000;">);
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">var</span> draw=can.getContext("2d"<span style="color: #000000;">);
</span><span style="color: #008080;"> 3</span>     <span style="color: #008000;">//</span><span style="color: #008000;"> 开始一个路径</span>
<span style="color: #008080;"> 4</span> <span style="color: #000000;">    draw.beginPath();
</span><span style="color: #008080;"> 5</span>     <span style="color: #008000;">//</span><span style="color: #008000;"> 设置线的粗细</span>
<span style="color: #008080;"> 6</span>     draw.lineWidth="5"<span style="color: #000000;">;
</span><span style="color: #008080;"> 7</span>     <span style="color: #008000;">//</span><span style="color: #008000;">设置线的颜色</span>
<span style="color: #008080;"> 8</span>     draw.strokeStyle="green"<span style="color: #000000;">;
</span><span style="color: #008080;"> 9</span>     <span style="color: #008000;">//</span><span style="color: #008000;"> 线的起点</span>
<span style="color: #008080;">10</span>     draw.moveTo(0,75<span style="color: #000000;">);
</span><span style="color: #008080;">11</span>     <span style="color: #008000;">//</span><span style="color: #008000;">线的终点 </span>
<span style="color: #008080;">12</span>     draw.lineTo(250,75<span style="color: #000000;">);
</span><span style="color: #008080;">13</span>     <span style="color: #008000;">//</span><span style="color: #008000;"> 开始绘制路径</span>
<span style="color: #008080;">14</span> <span style="color: #000000;">    draw.stroke();
</span><span style="color: #008080;">15</span>     <span style="color: #008000;">//</span><span style="color: #008000;">开始另一个路径</span>
<span style="color: #008080;">16</span> <span style="color: #000000;">    draw.beginPath();
</span><span style="color: #008080;">17</span>     <span style="color: #008000;">//</span><span style="color: #008000;"> 设置线的粗细</span>
<span style="color: #008080;">18</span>     draw.lineWidth="5"<span style="color: #000000;">;
</span><span style="color: #008080;">19</span>     draw.strokeStyle="purple"<span style="color: #000000;">;
</span><span style="color: #008080;">20</span>     draw.moveTo(25,05<span style="color: #000000;">);
</span><span style="color: #008080;">21</span>     draw.lineTo(35,25<span style="color: #000000;">);
</span><span style="color: #008080;">22</span>     draw.stroke();

효과: