canvas合成和裁剪

属性

globalCompositeOperation=type       设置覆盖类型

    source-over         源覆盖在目标上

    source-in           源覆盖在目标上的公共部分（只取源图形的部分）

    source-out          源覆盖在目标上以外的部分

    source-atop         源覆盖在目标上的公共部分与目标的交集

    destination-over    目标覆盖在源上

    destination-in

    destination-out

    destination-atop

    lighter             目标和源公共部分颜色值相加，结果是颜色更亮

    copy                只显示源

    xor                 去除源和目标的公共部分

    multiply            目标和源公共部分颜色值相乘，结果是颜色更暗

    screen              比lighter的效果更light

    overlay             multiply和screen的混合作用

    darken              保留目标和源像素最暗的部分

    lighten             保留目标和源像素最亮的部分

    color-dodge

    color-burn

    hard-light

    soft-light

    difference

    exclusion

    hue

    saturation

    color

    luminosity

ctx.clip();             裁剪一块儿区域

合成使用示例

ctx.fillStyle='blue';

ctx.fillRect(150,150,200,200)  // 源图形

ctx.globalCompositeOperation="source-over";

ctx.fillStyle='orange';

ctx.fillRect(100,100,200,200); // 目标图形

裁剪使用示例

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.arc(200, 200, 60, 0, Math.PI * 2, true);

ctx.stroke();

ctx.clip();

ctx.fillStyle="green";

ctx.fillRect(150,150,50,50);

巴特西

canvas合成和裁剪

canvas合成和裁剪

最新文章

热门文章