دليل مرجعي لـ HTML

مجموعة كاملة من علامات HTML

خاصية globalCompositeOperation في HTML canvas

يحدد خاصية globalCompositeOperation نوع العمليات التركيبية التي يتم تطبيقها عند رسم شكل جديد، حيث type هو نص يستخدم لتحديد النمط التركيبي أو النمط المزجي الذي يتم استخدامه.

دليل مرجع HTML canvas

在线示例

يتم رسم المربعات باستخدام قيم مختلفة من globalCompositeOperation.目标图像، المربع الأزرق هو源图像:

source-over

destination-over

جافا سكربت:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas globalCompositeOperation属性使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
لم يتم دعم علامة HTML5 canvas في متصفحك.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";　　　　
ctx.globalCompositeOperation="source-over";
ctx.fillRect(50,50,75,50);　　　　
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";　　　　
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(180,50,75,50);　　　　
</script>
</body>
</html>

الاختبار لرؤية ‹/›

تطابق المتصفحات

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9،Firefox،Opera،Chrome وSafari خاصية globalCompositeOperation.

ملاحظة:Internet Explorer 8 وكل الأصدار السابقة لا يدعم علامة <canvas>.

التعريف والاستخدام

يحدد خاصية globalCompositeOperation كيفية رسم صورة مصدر (جديدة) على صورة هدف (موجودة)

صورة المصدر = الرسم الذي تخطط لوضعه على لوحة الرسم.

صورة الهدف = الرسم الذي قمت بوضعه على لوحة الرسم.

القيمة الافتراضية:	source-over
قواعد اللغة الجافا سكربت:	سياق.globalCompositeOperation="source-in";

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	之外显示目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	之外显示目标图像中显示源图像。目标图像之内的源图像部分会显示，目标图像是透明的。
source-out	之外显示目标图像只有源图像。目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	之外显示源图像上显示目标图像。
destination-atop	之外显示源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	之外显示源图像中显示目标图像。源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out	之外显示源图像只有目标图像。源图像之外的目标图像部分会被显示，源图像是透明的。
lighter	忽略源图像 + 目标图像。
显示	忽略源图像。目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

在线示例

所有 globalCompositeOperation 属性值：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas globalCompositeOperation属性使用-基础教程(oldtoolbag.com)</title>
<style>
canvas
{
　　　　border:1px solid #d3d3d3;
　　　　margin-right:10px;
　　　　margin-bottom:20px;　　　　
}
</style>
</head>
<body>
<script>
var gco=new Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");
for (n=0;n<gco.length;n++)
{
　　　　document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
　　　　var　c=document.createElement("canvas");
　　　　c.width=120;
　　　　c.height=100;
　　　　document.getElementById("p_"　+　n).appendChild(c);
　　　　var　ctx=c.getContext("2d");　　　　
　　　　ctx.fillStyle="blue";
　　　　ctx.fillRect(10,10,50,50);
　　　　ctx.globalCompositeOperation=gco[n];
　　　　ctx.beginPath();
　　　　ctx.fillStyle="red";
　　　　ctx.arc(50,50,30,0,2*Math.PI);
　　　　ctx.fill();
　　　　document.write("</div>");　　　　
}
</script>
</body>
</html>

الاختبار لرؤية ‹/›

دليل مرجع HTML canvas

HTML: <template> العلامة