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

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

黄舟

Freigeben： 2017-01-22 10:51:19

Original

1425 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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).