HTML5 Kanvas segi empat tepat bulat tersuai dan garis putus-putus contoh kod_html5 kemahiran tutorial-Tutorial H5-php.cn

HTML5 Kanvas segi empat tepat bulat tersuai dan garisan sempang (RoundedRectangle dan Garisan Petak)

Melaksanakan demonstrasi menambah fungsi tersuai pada objek lukisan konteks 2d HTML Canvas, cara melukis garisan putus-putus dan mengawal saiz selang garis putus-putus, dan belajar melukis bulatan Petua Segiempat Sudut.

Fungsi asli yang disediakan dalam objek lukisan Kanvas HTML5 tidak melaksanakan fungsi melukis segi empat tepat bulat dan garis putus-putus, tetapi melalui Object.prototype bahasa JavaScript, kedua-dua fungsi ini boleh ditambah pada objek CanvasRenderingContext2D . Kesan demonstrasi kod adalah seperti berikut:

Kod komponen fishcomponent.js adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

CanvasRenderingContext2D.prototype.roundRect =
fungsi(x, y, lebar, tinggi, jejari, isi, lejang) {
jika (jenis lejang == " tidak ditentukan") {
lejang = benar;
}
jika (jenis jejari === "tidak ditentukan") {
jejari = 5; 🎜>this.beginPath();
this.moveTo(x jejari, y); , y radius);
this.lineTo(x width, y height - radius); x jejari, y tinggi); , jejari x, y);
this.closePath();
if (stroke) {
this.stroke(); fill();
}
};
CanvasRenderingContext2D.prototype.dashedLineTo = fungsi (dariX, dariY, toX, toY, corak) {
// jarak selang lalai -> if (typeof pattern === " undefined") {
corak = 5;
}
// hitung delta x dan delta y
var dx = (toX - fromX>); var dy = (kepadaY - dariY) ;
jarak var = Math.floor(Math.sqrt(dx*dx dy*dy)); /pattern);
var deltay = (dy/jarak) * corak;
var deltax = (dx/jarak) * corak; 🎜>untuk(var dl=0 ; dlif(dl%2) {
this.lineTo(fromX dl*deltax, fromY dl*deltay
} else {);
this.moveTo(fromX dl*deltax, fromY dl*deltay); demo dalam HTML:

Salin kod

Kodnya adalah seperti berikut:

< !DOCTYPE html>

http-equiv="Content-type" content= "text/html;charset=UTF-8">
Tunjuk Cara Segiempat Bulat Kanvas

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan