HTML canvas clip()Método
Objeto CanvasEjemplo
Recorta un área rectangular de 200*120 píxeles del lienzo. Luego, dibuja un rectángulo rojo. Solo la parte del rectángulo rojo dentro del área recortada es visible:
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);
</script>
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);
</script>
Pruébalo »
Soporte del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método clip().
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
Definición y uso
El método clip() recorta cualquier forma y tamaño del lienzo original.
Consejo:Una vez que se recorta un área, todos los dibujos posteriores se limitarán al área recortada (no se puede acceder a otras áreas del lienzo). También puede guardar el área actual del lienzo usando el método save() antes de usar el método clip(), y restaurarla en cualquier momento posterior (con el método restore()).
| Sintaxis de JavaScript: | context.clip(); |
|---|
Otras extensiones