HTML5-canvas 사용법 소개

새로운 요소

요소는 스크립트(일반적으로 JavaScript)를 통해 수행되는 그래픽 컨테이너입니다. 그래프를 그리는 스크립트입니다.

Canva를 사용하면 경로, 상자, 원, 문자를 그리고 다양한 방법으로 이미지를 추가할 수 있습니다.

참고:

기본적으로 요소에는 테두리와 내용이 없습니다. 　

사각형 그리기

<span style="color: #008000"><!--</span><span style="color: #008000">fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height</span><span style="color: #008000">--></span><span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="author"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="赵慧娟"</span><span style="color: #0000ff">></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: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="Scripts/jquery-1.10.2.js?1.1.10"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></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="background-color: #f5f5f5; color: #000000">$(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){</span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> canvas</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="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> ctx</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">canvas.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">);
                ctx.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">deeppink</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">;
                ctx.fillRect(</span><span style="background-color: #f5f5f5; color: #000000">10</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">10</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">100</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">100</span><span style="background-color: #f5f5f5; color: #000000">);<br>　　　　　　　　 <span style="color: #339966"> //ctx.moveTo(0,0);　　　　//定义开始坐标</span><br><span style="color: #339966">　　　　　　　　　//ctx.lineTo(100,100);　　//定义结束坐标</span><br><span style="color: #339966">　　　　　　　　　//ctx.stroke();　　　　　　//绘制线条</span><br></span>

            })</script></head><body><canvas id="myCanvas" width="100" height="100"></canvas></body></html>

실행 결과:

　

원 그리기

<span style="color: #008000"><!--</span><span style="color: #008000">arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离</span><span style="color: #008000">--></span><span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="author"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="赵慧娟"</span><span style="color: #0000ff">></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: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="Scripts/jquery-1.10.2.js?1.1.10"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></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="background-color: #f5f5f5; color: #000000">$(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){</span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> canvas</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="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> ctx</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">canvas.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">);
                ctx.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">deeppink</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">;
                ctx.arc(</span><span style="background-color: #f5f5f5; color: #000000">50</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">50</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">50</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">2</span><span style="background-color: #f5f5f5; color: #000000">*</span><span style="background-color: #f5f5f5; color: #000000">Math.PI);
                ctx.stroke();<br><span class="hl-identifier">　　　　　　　　　<span style="color: #339966">//ctx</span><span class="hl-code"><span style="color: #339966">.</span><span class="hl-identifier"><span style="color: #339966">fillText</span><span class="hl-brackets"><span style="color: #339966">(</span><span class="hl-quotes"><span style="color: #339966">"</span><span class="hl-string"><span style="color: #339966">Hello World</span><span class="hl-quotes"><span style="color: #339966">"</span><span class="hl-code"><span style="color: #339966">,</span><span class="hl-number"><span style="color: #339966">10</span><span class="hl-code"><span style="color: #339966">,</span><span class="hl-number"><span style="color: #339966">50</span><span class="hl-brackets"><span style="color: #339966">)</span><span class="hl-code"><span style="color: #339966">;　　//绘制实心字体</span><br><span style="color: #339966">　　　　　　　　　//<span class="hl-identifier">ctx<span class="hl-code">.<span class="hl-identifier">strokeText<span class="hl-brackets">(<span class="hl-quotes">"<span class="hl-string">Hello World<span class="hl-quotes">"<span class="hl-code">,<span class="hl-number">10<span class="hl-code">,<span class="hl-number">50<span class="hl-brackets">)<span class="hl-code">;　//绘制空心字体</span></span></span></span></span></span></span></span></span></span></span></span></span></span><br></span></span></span></span></span></span></span></span></span></span></span></span></span>})</span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">canvas</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">border</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 1px solid #000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span><span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></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">></span><span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span><span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

실행 결과:

　Gradient

　createLinearGradient(

x,y, x1, y1

) - 선 그라데이션 만들기　creatRadialGradient(

x,y,r,x1,y1,r1

) - 방사형/원형 그라데이션 만들기

// 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue"); 
// 填充渐变ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

실행 결과:

　

Radial / 원형 그라데이션

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

실행 결과:

image

<!DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="赵慧娟"><title></title><script src="Scripts/jquery-1.10.2.js?1.1.10"></script><style type="text/css">canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;}</style></head><body><img src="img/a.ico" id="flower" /><canvas id="myCanvas" width="100" height="100"></canvas><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");var img=document.getElementById("flower");
                img.onload=function(){
                    ctx.drawImage(img,20,20,80,80);　　//drawImage（对象，X,Y，W,H）}
            })</script></body></html>

실행 결과:

(오른쪽 사진은 캔버스 이미지입니다)

위 내용은 HTML5-canvas 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!