您现在的地位: 365体育备用网址 > bet365体育在线, > html5教程 > HTML5 canvas globalCompositeOperation 属性

HTML5 canvas globalCompositeOperation 属性_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > html5教程 > HTML5 canvas globalCompositeOperation 属性

HTML5 canvas globalCompositeOperation 属性

此节有 162 人学习过     参与评论

实例

使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目的图像。蓝色矩形是源图像:

     source-over             destination-over

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

亲自试一试

扫瞄器撑腰

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 撑腰 globalCompositeOperation 属性。

注释:Internet Explorer 8 以及更早的版本不撑腰 <canvas> 元素。

定义和用法

globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目的(已有)的图像上。

源图像 = 您打算放置到画布上的绘图。

目的图像 = 您已经放置在画布上的绘图。

默认值: source-over
JavaScript 语法: context.globalCompositeOperation="source-in";

属性值

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

金沙银河 国际娱乐网站实例

一切 globalCompositeOperation 属性值:

亲自试一试

如对本文有疑问,请提交到交流星际娱乐,广大热心网友会为你解答!! 点击进入星际娱乐


公布评论 (162人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换凯时娱乐网址 开户
最新评论
------分隔线----------------------------
html5教程目录
条评论
Sitemap