Buat corak dengan Kanvas HTML5 menggunakan: createPattern(imej, ulangan)− Kaedah ini akan menggunakan imej untuk mencipta corak. Parameter kedua boleh menjadi rentetan dengan salah satu daripada nilai berikut: ulang, ulang-x, ulang-y dan tiada ulangan. Jika rentetan kosong atau null ditentukan, pendua akan diandaikan.
Anda boleh cuba jalankan kod berikut untuk melihat cara membuat corak -
<!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>Atas ialah kandungan terperinci Buat corak menggunakan HTML5 Canvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Penggunaan arahan sumber dalam linux
Penyemak keserasian
Bagaimana untuk menukar devc++ kepada bahasa Cina
proses paparan linux
Bagaimana untuk menyelesaikan masalah bahawa pintasan IE tidak boleh dipadamkan
Perkara yang perlu dilakukan jika chrome tidak dapat memuatkan pemalam
seni bina c/s dan seni bina b/s
Apakah pelayan yang terdapat di web?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
