Bagaimana untuk melaksanakan isian tekstur dan lejang (Isi Dan Lejang) dalam kemahiran tutorial HTML5 Canvas

Bagaimana untuk melaksanakan isian tekstur dan lejang (Isi Dan Lejang) dalam kemahiran tutorial HTML5 Canvas_html5

WBOY

Lepaskan： 2016-05-16 15:49:15

asal

2018 orang telah melayarinya

Menunjukkan kesan teks Isian dan Guratan Kanvas HTML5, dan cara melaksanakan pengisian dan guratan tekstur berdasarkan Kanvas.

1: Pengisian warna dan strok
Pengisian warna boleh dicapai melalui fillStyle, dan warna stroke boleh dicapai melalui strokeStyle. Contoh mudah
adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

// isi dan sapukan teks
ctx.font = '60pt Calibri';
ctx.lineWidth = 3; Hello World!', 20 , 100);
ctx.fillStyle = 'red';
ctx.fillText('Hello World!', 20, 100); >2: Pengisian tekstur dan Strok

Kanvas HTML5 juga menyokong pengisian tekstur Dengan memuatkan imej tekstur dan kemudian mencipta corak berus, API untuk mencipta corak tekstur ialah ctx.createPattern(imageTexture, "repeat"). ; parameter kedua menyokong empat Nilai-nilai adalah "repeat-x", "repeat-y", "repeat", dan "no-repeat", yang bermaksud bahawa tekstur berulang atau tidak berulang sepanjang paksi X, Paksi-Y, dan arah XY masing-masing. Kod untuk sapuan tekstur dan isian adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

var woodfill = ctx.createPattern(imageTekstur,"ulang"); ctx.strokeStyle = woodfill; // isi segi empat tepat ctx.fillStyle = woodfill;

ctx.fillRect(60, 240, 260, 440);

Tiga: Run Effect

Kod:

Salin kod

Kodnya adalah seperti berikut:

Compatible" content="chrome=IE8" >

Isi Kanvas Dan Demo Teks Strok

var ctx = null;

var imageTexture = null; window.onload = function() { var canvas = document.getElementById("text_canvas"); >canvas.width = canvas.parentNode. clientWidth; canvas.height = canvas.parentNode.clientHeight; jika (!canvas.getContext) {

console.log("Kanvas tidak disokong. Sila pasangkan Penyemak imbas serasi HTML5.");

kembali;

}
// dapatkan konteks 2D kanvas dan lukis segi empat tepat
ctx = canvas.getContext("2d");
ctx.fillStyle= "hitam";
ctx.fillRect(0, 0, canvas.width, canvas.height); lineWidth = 3;
ctx.Style = 'hijau';
ctx.strokeText('Hello World!', 20, 100); ('Hello World!', 20, 100);
// isi dan gores mengikut corak
imageTexture = document.createElement('img'); ";
imageTexture.onload = dimuatkan();
}
fungsi dimuatkan() {
// kelewatan kepada imej dimuatkan
setTimeout(textureFill, 1000/30);
}
tekstur fungsiFill() {
// var woodfill = ctx.createPattern(imageTexture, "repeat-x");
// var woodfill = ctx .createPattern(imageTexture, "no-repeat");
var woodfill = ctx.createPattern(imageTexture, "repeat"); ctx.strokeText('Hello World!' , 20, 200);
// isi segi empat tepat
ctx.fillStyle = woodfill; }

Isi Dan Strok

;/body>
< /html>