suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-Tutorial zum Zeichnen von Rechteckcode-Sharing

HTML5-Tutorial zum Zeichnen von Rechteckcode-Sharing

高洛峰
高洛峰Original
2017-03-12 16:50:072198Durchsuche

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
Vorheriger Artikel：Detaillierte Beschreibung der lokalen Speicherinstanz von Html5webNächster Artikel：Detaillierte Beschreibung der lokalen Speicherinstanz von Html5web

In Verbindung stehende Artikel

Mehr sehen