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!
Convertir le texte en valeur numérique
La différence entre le compte de service WeChat et le compte officiel
utilisation du nœud clone
Que faire si avast signale des faux positifs
Comment utiliser la monnaie numérique
Dogecoin prix d'aujourd'hui
Où dois-je indiquer mon lieu de naissance : province, ville ou comté ?
Comment vérifier si le port 445 est fermé
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
