Latest web development tutorials
×

JavaScript & HTML DOM справочное руководство

обзор

JavaScript объекты

JavaScript Array объекты JavaScript Boolean объекты JavaScript Date объекты JavaScript Math объекты JavaScript Number объекты JavaScript String объекты JavaScript RegExp объекты JavaScript Глобальные свойства / функции JavaScript операторы

Browser объекты

Window объекты Navigator объекты Screen объекты History объекты Location объекты

DOM объекты

HTML DOM Document объекты HTML DOM объект Element HTML DOM Атрибут объекта HTML DOM объекты событий

HTML объекты

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

HTML холст клип метод ()

Холст Ссылка на объект объект Canvas

примеров

Вырезать прямоугольная область 200 * 120 пикселей от холста. Затем нарисуйте красный прямоугольник. Только красная прямоугольная часть режется в регионе открыты:

YourbrowserdoesnotsupporttheHTML5canvastag.

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>

Попробуйте »

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддержка клип () метод.

Примечание: 8 и более ранние версии Internet Explorer не поддерживают элемент <Canvas>.


Определение и использование

Метод зажима () вырезать любой формы и размера от первоначального холста.

Совет: После того, как вы вырезать определенную область, все последующие рисунок будет ограничено областью быть сокращены (нет доступа других областей на холсте). Кроме того, можно использовать метод зажима () перед методом () на текущей области холста сохраненной с помощью сохранения и восстановления (путем восстановления () метод) в будущем в любое время.

Синтаксис JavaScript: Контекст .clip ();


Холст Ссылка на объект объект Canvas