html5 合成两张图片,HTML5 Canvas笔记——图像合成

编程展示各种图像的合成效果，效果的名称

图像合成

#canvas {

border: 1px solid cornflowerblue;

position: absolute;

left: 150px;

top: 10px;

background: #eeeeee;

border: thin solid #aaaaaa;

cursor: pointer;

-webkit-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;

-moz-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;

box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;

}

目标图顶部显源图

目标图中显源图

目标图外显源图

目标图上显源图

源图顶部显目标图

源图中显目标图

源图外显目标图

源图上显目标图

源图+目标图

只显示源图

异或组合

Canvas not supports

'use strict';

let context = document.getElementById('canvas').getContext('2d'),

selectElement = document.getElementById('compositingSelect');

/**

* 绘制文字

*/

let drawText = () => {

context.save();

context.shadowColor = 'rgba(100, 100, 150, 0.8)';

context.shadowOffsetX = 5;

context.shadowOffsetY = 5;

context.shadowBlur = 10;

context.fillStyle = 'cornflowerblue';

context.fillText('HTML', 20, 250);

context.strokeStyle = 'yellow';

context.strokeText('HTML', 20, 250);

context.restore();

};

//Event handlers……

let windowToCanvas = (canvas, x, y) => {

let bbox = canvas.getBoundingClientRect();

return {

x:x-bbox.left*(canvas.width/bbox.width),

y:y-bbox.top*(canvas.height/bbox.height)

};

};

context.canvas.οnmοusemοve=e=>{

let loc = windowToCanvas(context.canvas,e.clientX,e.clientY);

context.clearRect(0,0,context.canvas.width,context.canvas.height);

drawText();

context.save();

//设置选项即为全局合成属性

context.globalCompositeOperation=selectElement.value;

context.beginPath();

context.arc(loc.x,loc.y,100,0,Math.PI*2,false);

context.fillStyle='orange';

context.stroke();

context.fill();

context.restore();

}

//Init……

selectElement.selectedIndex=3;

context.lineWidth=0.5;

context.font='128pt Comic-sans';

drawText();

效果如图：