HTML5-Tutorial zum Zeichnen von Rechteckcode-Sharing-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

HTML5-Tutorial zum Zeichnen von Rechteckcode-Sharing

高洛峰

Mar 12, 2017 pm 04:50 PM

html5 kann viele Arten von Formen zeichnen. Der Code zum Zeichnen von Rechtecken wird unten geteilt.

Der Code lautet wie folgt:

<!DOCTYPE html><head> 
<meta charset=utf-8> 
<title>HTML5画矩形</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://www.php.cn/"></script</a>>
</head> 
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d");        //获取2d内容的引用，调用绘图API
draw.fillStyle="#ff0000";            //方式一指定填充颜色
draw.fillRect(0,0,300,100);            //坐标和长宽
draw.fillStyle="rgba(0,0,255,0.5)";    //方式二rgb+透明度
draw.fillRect(400,0,100,100);        //坐标和长宽
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body> 
</html>

Rendering

HTML5-Tutorial zum Zeichnen von Rechteckcode-Sharing

Das obige ist der detaillierte Inhalt vonHTML5-Tutorial zum Zeichnen von Rechteckcode-Sharing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Verwandter Artikel

HTML -Audio und Video verstehen: Attribute und ZugänglichkeitMay 16, 2025 am 12:05 AM

Html5audioandvideoelementSenHanceFunctionality und Accessibility ThroughSpecificAttributes.1) Die'Controls'attributeaddsStandardPlaybackControls, while'aria-label'imProvesscreenReAccessibilität.2) Die I-l-l-label'improvesscesreaderAccessibilität und'poster'attributeeneenexperien und '' '

Mastering Microdata: Eine Schritt-für-Schritt-Anleitung für HTML5May 14, 2025 am 12:07 AM

Microdatainhtml5enhancesseoandUseRexperienceByProvidingStructuredDatoSearchEngines.1) UseItemScope, ItemType und ItempropattributestOMarkupContent-ProductsoreEvents.2) testMicrodatawithtoolsgoogle-likegoogle-strukturiert

Was ist neu in HTML5 -Formen? Erforschen der neuen EingangstypenMay 13, 2025 pm 03:45 PM

Html5IntroducesnewinputTyphatenhanceUSeRexperience, SimplifyDevelopment und undimproveAccessibility.1) automatisch ValidateSeMailFormat.2) optimizesFormobile -Withanumererikeypad.3) und SimplifyDimeIndtimeInput, reduzieren, reduzieren, umthenedporcustomesedomsolionen zu reduzieren.

H5 verstehen: Die Bedeutung und BedeutungMay 11, 2025 am 12:19 AM

H5 ist HTML5, die fünfte Version von HTML. HTML5 verbessert die Ausdruckskraft und Interaktivität von Webseiten, führt neue Funktionen wie semantische Tags, Multimedia -Unterstützung, Offline -Speicher- und Leinwandzeichnung ein und fördert die Entwicklung der Webtechnologie.

H5: Zugänglichkeits- und Webstandards KonformitätMay 10, 2025 am 12:21 AM

Die Zugänglichkeit und die Einhaltung von Netzwerkstandards sind für die Website von wesentlicher Bedeutung. 1) Barrierefreiheit stellt sicher, dass alle Benutzer den gleichen Zugriff auf die Website haben, 2) Netzwerkstandards folgen, um die Zugänglichkeit und Konsistenz der Website zu verbessern.

Was ist das H5 -Tag in HTML?May 09, 2025 am 12:11 AM

Das H5-Tag in HTML ist ein Titel in fünfter Ebene, mit dem kleinere Titel oder Untertitel gekennzeichnet werden. 1) Das H5 -Tag hilft, die Inhaltshierarchie zu verfeinern und die Lesbarkeit und SEO zu verbessern. 2) In Kombination mit CSS können Sie den Stil anpassen, um den visuellen Effekt zu verbessern. 3) Verwenden Sie H5 -Tags vernünftigerweise, um Missbrauch zu vermeiden und die strukturelle logische Inhaltsstruktur sicherzustellen.

H5 -Code: Ein Anfängerhandbuch zur WebstrukturMay 08, 2025 am 12:15 AM

Zu den Methoden zum Erstellen einer Website in HTML5 gehören: 1. Semantische Tags, um die Webseitenstruktur zu definieren, z. B. usw.; 2. Einbetten Sie Multimedia -Inhalte, Verwendung und Tags ein; 3. Anwenden Sie fortschrittliche Funktionen wie die Formularüberprüfung und die lokale Speicherung an. In diesen Schritten können Sie eine moderne Webseite mit klarer Struktur und reichhaltigen Funktionen erstellen.

H5 -Codestruktur: Inhalte zur Lesbarkeit organisierenMay 07, 2025 am 12:06 AM

Eine vernünftige H5 -Codestruktur ermöglicht es der Seite, sich von vielen Inhalten abzuheben. 1) Verwenden Sie semantische Beschriftungen wie usw., um Inhalte zu organisieren, um die Struktur klar zu machen. 2) Steuern Sie den Rendering -Effekt von Seiten auf verschiedenen Geräten über CSS -Layout wie Flexbox oder Grid. 3) Responsive Design implementieren, um sicherzustellen, dass sich die Seite an verschiedene Bildschirmgrößen anpasst.

See all articles