Komentar: Artikel ini akan memperkenalkan efek teks Canvas HTML5 dan stroke secara detail. Berdasarkan kanvas, cara mencapai pengisian dan stroke tekstur, pengisian warna dan stroke, kode spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Demonstrasi efek teks isi dan stroke kanvas HTML5, berdasarkan pada bagaimana kanvas menerapkan pengisian dan stroke tekstur.1: Isi warna dan stroke
Pengisian warna dapat dicapai melalui Stilstyle, dan warna stroke dapat dicapai melalui strokestyle. Contoh sederhana
sebagai berikut:
// isi dan stroke teks
ctx.font = '60pt Calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'green';
ctx.stroketext ('halo dunia!', 20, 100);
ctx.fillstyle = 'merah';
ctx.filltext ('Hello World!', 20, 100);
Dua: Pengisian Tekstur dan Stroke
Kanvas HTML5 juga mendukung pengisian tekstur. Dengan memuat gambar tekstur dan kemudian membuat pola kuas, API untuk membuat pola tekstur adalah ctx.createPattern (imagetexture, ulangi); Parameter kedua mendukung empat nilai, yaitu Repeat-X, Repeat-Y, Repeat, No-Repeat, yang berarti bahwa tekstur diulang atau tidak diulangi di sepanjang sumbu X, sumbu y, dan arah XY masing-masing. Kode untuk stroke dan mengisi tekstur adalah sebagai berikut:
var woodfill = ctx.createPattern (imagetexture, "ulangi");
ctx.strokestyle = woodfill;
ctx.stroketext ('Hello World!', 20, 200);
// Isi persegi panjang
ctx.fillstyle = woodfill;
ctx.fillrect (60, 240, 260, 440);
Gambar Tekstur:
Tiga: Efek Operasi
Kode:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "x-ua-kompatibel" konten = "chrome = ie8">
<meta http-equiv = "tipe konten" content = "text/html; charset = utf-8">
<title> kanvas mengisi dan stroke demo teks </iteme>
<tautan href = "default.css" />
<script>
var ctx = null; // Konteks 2D Variabel Global
var imagetexture = null;
window.onload = function () {
var canvas = document.geteLementById ("text_canvas");
console.log (canvas.parentnode.clientwidth);
canvas.width = canvas.parentnode.clientwidth;
canvas.height = canvas.parentnode.clientHeight;
if (! canvas.getContext) {
Console.log ("Canvas tidak didukung. Harap instal browser yang kompatibel HTML5.");
kembali;
}
// Dapatkan konteks 2D kanvas dan menggambar persegi panjang
ctx = canvas.getContext ("2d");
ctx.fillstyle = "hitam";
ctx.fillrect (0, 0, canvas.width, canvas.height);
// isi dan stroke teks
ctx.font = '60pt Calibri';
ctx.linewidth = 3;
ctx.strokestyle = 'green';
ctx.stroketext ('halo dunia!', 20, 100);
ctx.fillstyle = 'merah';
ctx.filltext ('Hello World!', 20, 100);
// Isi dan stroke berdasarkan pola
imagetexture = document.createElement ('img');
imagetexture.src = "../pattern.png";
imagetexture.onload = loaded ();
}
fungsi dimuat () {
// tunda ke gambar dimuat
setTimeout (Texturefill, 1000/30);
}
fungsi texturefill () {
// var woodfill = ctx.createPattern (imagetexture, "ulangi-x");
// var woodfill = ctx.createPattern (imagetexture, "ulangi-y");
// var woodfill = ctx.createPattern (imagetexture, "no-rePeat");
var woodfill = ctx.createPattern (imagetexture, "ulangi");
ctx.strokestyle = woodfill;
ctx.stroketext ('Hello World!', 20, 200);
// Isi persegi panjang
ctx.fillstyle = woodfill;
ctx.fillrect (60, 240, 260, 440);
}
</script>
</head>
<body>
<h1> demo teks kanvas html5 - oleh ikan suram </h1>
<pr Pre> Isi dan Stroke </pe>
<div>
<Canvas> </an Canvas>
</div>
</body>
</html>