So zeichnen Sie Grafiken mit der CanvasAPI von H5-H5-Tutorial-php.cn

So zeichnen Sie Grafiken mit der CanvasAPI von H5

php中世界最好的语言

Freigeben： 2018-01-09 09:51:02

Original

2379 Leute haben es durchsucht

Dieses Mal stelle ich Ihnen die Canvas-API von H5 zum Zeichnen von Grafiken vor und wie verwende ich Canvas zum Erstellen von Grafiken? Was sind die Vorsichtsmaßnahmen für die Erstellung von Grafiken mit Canvas? Hier sind praktische Fälle, werfen wir einen Blick darauf.

Canvas-Element
Der folgende HTML-Code definiert ein Canvas-Element.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Canvas快速入门</title>  
    <meta charset="utf-8"/>  
</head>  
<body>  
<div>  
    <canvas id="mainCanvas" width="640" height="480"></canvas>  
</div>  
</body>  
</html>

Nach dem Login kopieren

Greifen Sie über die folgende Javascript-Anweisung auf das Canvas-Element zu:

//DOM写法   
window.onload = function () {   
    var canvas = document.getElementById("mainCanvas");   
    var context = canvas.getContext("2d");   
};   
//jQuery写法   
$(document).ready(function () {   
    var canvas = $("#mainCanvas");   
    var context = canvas.get(0).getContext("2d");   
});   
//接下来就可以调用context的方法来调用绘图API

Nach dem Login kopieren

2. Basic API
2.1 Koordinatensystem
Canvas 2D-Rendering Der Kontext verwendet das ebene kartesische Koordinatensystem, die obere linke Ecke ist der Ursprung (0,0) und 1 Einheit des Koordinatensystems entspricht 1 Pixel des Bildschirms.

//绘制一个填充矩形   
context.fillRect(x, y, width, height)   
//绘制一个边框矩形   
context.strokeRect(x, y, width, height)   
//清除一个矩形区域   
context.clearRect(x, y, width, height)

Nach dem Login kopieren

2.2.2 Linien
Es gibt einige Unterschiede zwischen dem Zeichnen von Linien und dem Zeichnen von Grafiken. Linien werden eigentlich Pfade genannt. Um einen einfachen Pfad zu zeichnen, müssen Sie zuerst die beginPath-Methode aufrufen, dann moveTo aufrufen, um die Startpunktkoordinaten des Pfads festzulegen, dann lineTo aufrufen, um die Endpunktkoordinaten des Liniensegments festzulegen (kann mehrmals festgelegt werden) und dann Rufen Sie closePath auf, um die Pfadzeichnung abzuschließen. Rufen Sie schließlich „Stroke“ auf, um den Umriss zu zeichnen (oder „Fill“, um den Pfad zu füllen). Das Folgende ist ein Beispiel:

//示例   
context.beginPath();    //开始路径   
context.moveTo(40, 40);    //移动到点(40,40)   
context.lineTo(300, 40);    //画线到点(300,30)   
context.lineTo(40, 300);    //画线到点(40,300)   
context.closePath();    //结束路径   
context.stroke();    //绘制轮廓   
//或者填充用context.fill();

Nach dem Login kopieren

2.2.3 Kreis
Canvas verfügt eigentlich nicht über eine spezielle Methode zum Zeichnen eines Kreises. Sie können einen Kreis simulieren, indem Sie einen Bogen zeichnen. Da ein Bogen ein Pfad ist, sollte die API zum Zeichnen von Bögen zwischen beginPath und closePath eingefügt werden.
2.3 Stil
2.3.1 Linienfarbe ändern

var color;   
//指定RGB值   
color = "rgb(255, 0, 0)";   
//指定RGBA值（最后一个参数为alpha值，取值0.0~1.0）   
color = "rgba(255, 0, 0, 1)";   
//指定16进制码   
color = "#FF0000";   
//用单词指定   
color = "red";   
//设置填充颜色   
context.fillStyle = color;   
//设置边框颜色   
context.strokeStyle = color;

Nach dem Login kopieren

2.3.2 Linienbreite ändern

//指定线宽值   
var value= 3;   
//设置边框颜色   
context.linewidth = value;

Nach dem Login kopieren

2.4 Text zeichnen

//Angeben Schriftstil

context.font = "italic 30px fett";

//Zeichne Text an Punkt (40,40)

context.fillText("Hallo Welt! " , 40, 40);

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So zählen Sie die Anzahl der Tabellensummen im Bootstrap

So verwenden Sie JS zum Wechseln zwischen Gleichzeitiges Ausblenden und Anzeigen von Schaltersymbolen

So verwenden Sie JS zum Deaktivieren und Aktivieren von Schaltflächen

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Grafiken mit der CanvasAPI von H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!