English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
clip() shi Canvas 2D API jiang dang qian chuang jian de lu xing she zhi wei dang qian qie jian lu xing de fang fa。
cong hua mu jie qu 200 * 120 xi xiao mi ju xing qu yu. ran hou, hua yige hong se ju xing。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas clip() fang fa shi yong-ji ben jiao cheng(oldtoolbag.com)</title>
</head>
<body>
<span>mei you jing xing clip():</span>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
ni de liu lian chu ban bu zhi chi HTML5 canvas biao qian。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// hua yige ju xing
ctx.rect(50,20,200,120);
ctx.stroke();
// hua yige hong se ju xing
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>
<span>you jing xing clip():</span>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
ni de liu lian chu ban bu zhi chi HTML5 canvas biao qian.</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//qita he hua yige ju xing qu yu
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//qita he hua yige ju xing
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>اختبار لمعرفة ‹/›IEFirefoxOperaChromeSafari
يدعم clip() Internet Explorer 9،Firefox،Opera،Chrome وSafari الطريقة.
ملاحظة:Internet Explorer 8 وكل الإصدارات السابقة لا يدعم علامة <canvas>.
يقطع طريقة clip() أي منطقة شكل وأحجام من لوحة الرسم الأصلية.
إشارة:بعد تقطيع منطقة، جميع الرسوميات التالية ستكون محدودة في منطقة التقطيع هذه (لا يمكن الوصول إلى مناطق أخرى من لوحة الرسم). ولكن يمكنك استخدام طريقة save() قبل استخدام طريقة clip() لتحتفظ بمنطقة الرسم الحالية، ويمكنك استعادتها في أي وقت لاحق (باستخدام طريقة restore()).
| جافا سكربت: لغة الجرافيكا | سياق.clip(); |
|---|