Heim > Web-Frontend > H5-Tutorial > Hauptteil

Einführung in die Verwendung von HTML5-Canvas

PHP中文网
Freigeben: 2017-06-21 15:52:14
Original
1722 Leute haben es durchsucht

Neues Element

Das -Element wird zum Zeichnen von Grafiken verwendet, was über Skripte (normalerweise JavaScript) erfolgt.

Tag ist nur ein Grafikcontainer, Sie müssen ein Skript verwenden, um die Grafiken zu zeichnen.

Mit Canva können Sie auf vielfältige Weise Pfade, Kästchen, Kreise und Zeichen zeichnen und Bilder hinzufügen.

Hinweis: Standardmäßig hat das -Element keine Rahmen oder Inhalte.

 Diagramm

<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>
Nach dem Login kopieren
            })</script></head><body><canvas id="myCanvas" width="100" height="100"></canvas></body></html>
Nach dem Login kopieren

Laufergebnis:

Zeichne einen Kreis

<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>
Nach dem Login kopieren

Laufergebnis:

 Verlauf

CreateLinearGradient(x,y,x1,y1) – Erstellen Sie einen Linienverlauf

createRadialGradient(x,y,r,x1,y1,r1 ) – Erstellen Sie einen radialen/kreisförmigen Farbverlauf

// 创建渐变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);
Nach dem Login kopieren

Laufergebnis:

 Radialer/kreisförmiger Farbverlauf

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);
Nach dem Login kopieren

Laufergebnis:

Bild

<!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>
Nach dem Login kopieren

Laufergebnis:

(Das Bild rechts ist das Leinwandbild)

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von HTML5-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!