简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

html5:Leinwand

高洛峰
Freigeben： 2016-10-15 09:14:07
Original
1541 Leute haben es durchsucht

1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签
</body>
</html>
Nach dem Login kopieren

3.在画布上绘图。

<script type="text/javascript">
    //用javascript来绘制图像
    //获取到canvas元素
    var can=document.getElementById("mycanvas");
    //创建html5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    var draw=can.getContext("2d");
    //fillStyle();可以是css的颜色，渐变，图案
    draw.fillStyle="red";
    //fillRect(x,y,width,height) 定义填充方式
    draw.fillRect(0,0,125,12);
    </script>
Nach dem Login kopieren

4.canvas-路径

var can=document.getElementById("mycanvas");
    var draw=can.getContext("2d");
    // 开始一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    //设置线的颜色
    draw.strokeStyle="green";
    // 线的起点
    draw.moveTo(0,75);
    //线的终点 
    draw.lineTo(250,75);
    // 开始绘制路径
    draw.stroke();
    //开始另一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    draw.strokeStyle="purple";
    draw.moveTo(25,05);
    draw.lineTo(35,25);
    draw.stroke();
Nach dem Login kopieren

效果：

html5:Leinwand

Verwandte Etiketten：
html5：canvas
Quelle：php.cn
Vorheriger Artikel：Basierend auf HTML5 wird das Problem gelöst, dass Videos im übergeordneten Block hinzugefügt werden und nicht im Vollbildmodus abgespielt werden können. Nächster Artikel：Eine H5-Seite, die den WeChat-Gruppenchat imitiert
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Die *zwei* Höhenwerte der Leinwand abrufen? Ich versuche, zwei Höhenwerte dieser Leinwand zu ermitteln. <canvaswidth="886"...
Aus 2024-04-05 09:32:33
0
1
1360
So exportieren Sie JPG-Dateien aus mehreren Leinwänden Ich habe mehrere Leinwände, die als Ebenen verwendet werden. canvasc1=backgroundimage.canv...
Aus 2024-04-03 21:02:43
0
1
319
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
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！