Créez un motif avec HTML5 Canvas en utilisant la méthode suivante : createPattern(image, repetition)− Cette méthode utilisera une image pour créer un motif. Le deuxième paramètre peut être une chaîne avec l'une des valeurs suivantes : répéter, répéter-x, répéter-y et non-répétition. Si une chaîne vide ou null est spécifiée, un doublon sera supposé.
Vous pouvez essayer d'exécuter le code suivant pour voir comment créer un modèle -
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quels sont les logiciels de test en ligne des performances informatiques ?
Quelles sont les méthodes pour changer instantanément l'IP dans les vps dynamiques ?
conversion RVB en hexadécimal
Quelle est la touche de raccourci pour changer d'utilisateur ?
Quelle est la touche de raccourci pour copier et coller ctrl ?
Outil de gestion des défauts
Qu'est-ce que la crypto-monnaie kol
Comment centrer la page Web dans Dreamweaver
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
