HTML Referenzhandbuch

HTML Tag-Übersicht

HTML canvas createPattern() Methode

createPattern() ist Canvas 2Das API verwendet das angegebene Bild (CanvasImageSource), um ein Muster zu erstellen. Es wiederholt das Elementbild in der angegebenen Richtung durch den Parameter repetition. Diese Methode gibt ein CanvasPattern-Objekt zurück. CanvasPattern ctx.createPattern(image, repetition);

HTML canvas Reference Manual

Verwendete Bilder:

Online-Beispiel

Wiederholen Sie das Bild in horizontaler und vertikaler Richtung:

JavaScript：

Beispiel

!DOCTYPE html>
<html>
<head>
<title>Verwendung der Methode HTML canvas createPattern() (Grund教程网 oldtoolbag.com)</title>
</head>
<body>
<p>Bildanwendung:/p>
<img src="haha.gif" id="lamp">
<p>Bildschirm:/p>
<button onclick="draw('repeat#39;)">Wiederholend</button>　
<button onclick="draw('repeat-x#39;)">Wiederholend-x</button>　
<button onclick="draw('repeat-y#39;)">Wiederholend-y</button>　
<button onclick="draw('no-repeat#39;)">Nicht wiederholend</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px fest #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tags.
</canvas>
<script>
function draw(direction)
{
　　　　var c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d);
　　　　ctx.clearRect(0,0,c.width,c.height);　
　　　　var img=document.getElementById("lamp")
　　　　var pat=ctx.createPattern(img,direction);
　　　　ctx.rect(0,0,220,128);
　　　　ctx.fillStyle=pat;
　　　　ctx.fill();
}
</script>
</body>
</html>

Testen Sie, ob ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support the createPattern() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The createPattern() method repeats the specified element in the specified direction.
The element can be an image, video, or another <canvas> element.
Repeated elements can be used to draw/Fill rectangles, circles, lines, and more.

JavaScript Syntax:	context.createPattern(image,"repeat\|repeat-x\|repeat-y\|no-repeat());

Parameter Value

Parameter	Description
image	Specify the image, canvas, or video element to be used for the pattern.
repeat	Default. This mode repeats in both horizontal and vertical directions.
repeat-x	This mode repeats only in the horizontal direction.
repeat-y	This mode repeats only in the vertical direction.
no-repeat	This mode is displayed only once (not repeated).

HTML canvas Reference Manual

HTML: <template> Tag