图像上下文对象中的 globalCompositeOperation=type
globalCompositeOperation 的属性
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 添加玫瑰 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- // 获取 canvas 的 id
- var canvas=document.getElementById("canvas");
- //canvas 的获取图形上下文 context
- var context=canvas.getContext("2d");
- // 设置 globalcompositeoperation
- context.globalCompositeOperation="darken";
- // 绘制图像
- var img=new Image();
- img.src="http://p0.so.qhmsg.com/t0143f34941cb1804ff.jpg";
- img.onload=function(){
- context.drawImage(img, 170, 0,500,500,0,0,500,500);
- var img1=new Image();
- img1.src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2247608469,2731271910&fm=27&gp=0.jpg";
- img1.onload=function(){
- context.drawImage(img1, 45, 10, 150, 150);
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/a4b401c2a9b84bf0e5eedfca202a2b42.html