HTML canvas clip() Metode

❮ HTML-doekverwysing

Voorbeeld

Knip van 'n reghoekige gebied van 200*120 pixels vanaf die doek. Teken dan 'n rooi reghoek. Slegs die deel van die rooi reghoek wat binne die geknipte area is, is sigbaar:

Jou blaaier ondersteun nie die HTML5-skerm nie.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.

Method
clip() Yes 9.0 Yes Yes Yes

Definisie en gebruik

Die clip()-metode knip 'n streek van enige vorm en grootte van die oorspronklike doek af.

Wenk: Sodra 'n streek geknip is, sal alle toekomstige tekeninge beperk word tot die geknipte streek (geen toegang tot ander streke op die doek nie). U kan egter die huidige doekstreek stoor deur die save() metode te gebruik voordat u die clip() metode gebruik, en dit herstel (met die restore() metode) enige tyd in die toekoms.

JavaScript-sintaksis: konteks .clip();

❮ HTML-doekverwysing