Erstellen Sie ein Muster mit HTML5 Canvas mit der folgenden Methode: createPattern(image, repetition)− Diese Methode verwendet ein Bild, um ein Muster zu erstellen. Der zweite Parameter kann eine Zeichenfolge mit einem der folgenden Werte sein: „repeat“, „repeat-x“, „repeat-y“ und „no-repeat“. Wenn eine leere Zeichenfolge oder Null angegeben wird, wird von einem Duplikat ausgegangen.
Sie können versuchen, den folgenden Code auszuführen, um zu sehen, wie Sie ein Muster erstellen -
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin: 0px auto;
}
</style>
<script>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// create new image object to use as pattern
var img = new Image();
img.src = 'images/pattern.jpg';
img.onload = function(){
// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>Das obige ist der detaillierte Inhalt vonErstellen Sie ein Muster mit HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
welche Dateien sind
Was ist das Funktionsprinzip und der Prozess von Mybatis?
Welches Format hat doc?
Was sind die Hauptmerkmale von Computern?
So kopieren Sie eine Excel-Tabelle, um sie auf die gleiche Größe wie das Original zu bringen
So verwenden Sie die Rangfunktion
Welche Software ist Adobe
Ändern Sie die Hintergrundfarbe des Wortes in Weiß
