Komentar: Fungsi asli yang disediakan dalam objek gambar kanvas HTML5 tidak menyadari fungsi menggambar persegi panjang dan garis putus -putus. Melalui objek.Prototipe JavaScript, Anda dapat menambahkan dua fungsi ini ke objek CanvasrenderingContext2D. Implementasi spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya.
HTML5 Canvas Custom Rectangle Rectangle dan Dash Line (RoundedRectangle dan Dash Line)Menerapkan demonstrasi menambahkan fungsi fungsi khusus ke objek gambar konteks HTML Canvas 2D, cara menggambar garis putus -putus dan mengontrol ukuran garis putus -putus, dan mempelajari keterampilan menggambar persegi panjang bundar.
Fungsi asli yang disediakan dalam objek gambar kanvas HTML5 tidak menyadari fungsi menggambar persegi panjang dan garis putus -putus, tetapi objek bahasa JavaScript. Prototipe dapat digunakan untuk menambahkan dua fungsi ini ke objek CanvasrenderingContext2D. Efek demonstrasi kode adalah sebagai berikut:
Kode Komponen FishComponent.js adalah sebagai berikut:
CanvasrenderingContext2d.prototype.roundrect =
fungsi (x, y, lebar, tinggi, jari -jari, isi, stroke) {
if (typeof stroke == "tidak terdefinisi") {
stroke = true;
}
if (typeof radius === "tidak terdefinisi") {
radius = 5;
}
this.beginpath ();
this.moveto (x + radius, y);
this.lineto (x + lebar - radius, y);
this.quadraticCurveto (x + lebar, y, x + lebar, y + radius);
this.lineto (x + lebar, y + tinggi - jari -jari);
this.quadraticCurveto (x + lebar, y + tinggi, x + lebar - jari -jari, y + tinggi);
this.lineto (x + radius, y + tinggi);
this.quadraticCurveto (x, y + tinggi, x, y + tinggi - jari -jari);
this.lineto (x, y + radius);
this.quadraticCurveto (x, y, x + radius, y);
this.closepath ();
if (stroke) {
this.stroke ();
}
if (isi) {
this.fill ();
}
};
CanvasrenderingContext2d.prototype.dashedlineto = fungsi (fromx, fromy, tox, mainan, pola) {
// jarak interval default -> 5px
if (typeOf pola === "tidak terdefinisi") {
pola = 5;
}
// Hitung Delta X dan Delta Y
var dx = (tox - fromx);
var dy = (mainan - fromy);
var jarak = math.floor (math.sqrt (dx*dx + dy*dy));
var dashlineintever = (pola <= 0)? Jarak: (jarak/pola);
var deltay = (dy/jarak) * pola;
var deltax = (dx/jarak) * pola;
// Gambar garis dasbor
this.beginpath ();
untuk (var dl = 0; dl <dashlineintever; dl ++) {
if (dl%2) {
this.lineto (fromx + dl*deltax, fromy + dl*deltay);
} kalau tidak {
this.moveto (fromx + dl*deltax, fromy + dl*deltay);
}
}
this.stroke ();
};
Demonstrasi panggilan dalam html:
<! 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> Demo Canvas Rounded Rectangle </iteme>
<Script src = "fishComponent.js"> </script>
<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;
}
var context = canvas.getContext ('2d');
context.strokestyle = "merah";
Context.Fillstyle = "RGBA (100.255.100, 0,5)";
Context.Roundrect (50, 50, 150, 150, 5, true);
context.strokestyle = "biru";
untuk (var i = 0; i <10; i ++) {
var delta = i*20;
var pola = i*2+1;
Context.DashedLineto (250, 50+Delta, 550, 50+Delta, Pattern);
}
}
</script>
</head>
<body>
<h1> demo dasbor kanvas html5 - oleh ikan suram </h1>
<pr Pre> garis dasbor dan persegi panjang bulat </pr Pre>
<div>
<Canvas> </an Canvas>
</div>
</body>
</html>