Heim > Artikel > Web-Frontend > Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

黄舟Original: 2017-01-22 10:51:191397Durchsuche

Wie bereits erwähnt, ist Canvas eine wichtige Funktion in HTML5. Die mit Photoshop erzielbaren Effekte können auch mit Canvas erzielt werden.

1. Verwendung des Canvas-Tags

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>  
    </body>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

Sie sehen, dass Canvas wie eine Leinwand ist, auf der wir die Grafiken zeichnen können, die wir brauchen. . Das Canvas-Element selbst verfügt über keine Zeichenfunktionen. Alle Zeichenarbeiten müssen in JavaScript durchgeführt werden.

2. Zeichnen Sie ein Rechteck

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
    </body>  
    <script type="text/javascript">  
        var c=document.getElementById(&#39;1&#39;);  
        var p=c.getContext("2d");  
    <span style="white-space:pre">  </span>//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。  
        p.fillStyle="#FF0000";  
        p.fillRect(0, 0, 300, 300);  
        p.fillStyle="rgba(0,0,255,0.5)";  
        p.fillRect(200,200,500,500);  
    </script>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

3. Zeichnen Sie eine Linie

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
    <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
 <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.moveTo(10,10);  
    p.lineTo(150,50);  
    p.lineTo(10,50);  
    p.stroke();  
 </script>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

4. Zeichne einen Kreis

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.fillStyle="#FF0000";  
    p.beginPath();  
    p.arc(80,80,15,0,Math.PI*2,true);  
    p.closePath();  
    p.fill();  
 </script>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

5. Farbverlauf

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById("1");  
    var cxt=c.getContext("2d");  
    var grd=cxt.createLinearGradient(0,0,175,50);  
    grd.addColorStop(0,"#FF0000");  
    grd.addColorStop(1,"#00FF00");  
    cxt.fillStyle=grd;  
    cxt.fillRect(0,0,175,50);  
 </script>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

6. Zeichne einen Bild

<!DOCTYPE HTML>  
<html>  
<body>  
  
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">  
Your browser does not support the canvas element.  
</canvas>  
  
<script type="text/javascript">  
  
var c=document.getElementById("myCanvas");  
var cxt=c.getContext("2d");  
var img=new Image()  
img.src="/i/eg_flower.png"  
cxt.drawImage(img,0,0);  
  
</script>  
  
</body>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

7. Polygon

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.fillStyle="#FF0000";  
    p.moveTo(10,10);  
    p.lineTo(150,50);  
    p.lineTo(10,50);  
    p.lineTo(20,30);  
    p.fill();  
 </script>  
</html>

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (6) – Grundlagen zum Zeichnen von Canvas-Grafiken

Das Obige ist Xiaoqiangs HTML5-Entwicklungspfad für Mobilgeräte (6 ) – Grundlegende Inhalte zum Zeichnen von Canvas-Grafiken. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

Stellungnahme：

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

Vorheriger Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (5) – Erstellen eines schönen VideoplayersNächster Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (5) – Erstellen eines schönen Videoplayers

In Verbindung stehende Artikel

Mehr sehen