Canvas的globalCompositeOperation属性详解和小练习&&实现放大镜
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas的globalCompositeOperation属性详解和小练习&&实现放大镜相关的知识，希望对你有一定的参考价值。
目录：
每篇前言~
🏆🏆作者介绍：【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者
- 🔥🔥本文已收录于前端系列教程：《前端系列教程》
- 🔥🔥热门专栏推荐：《Django框架从入门到实战》、《爬虫从入门到精通系列教程》、《爬虫高级》、《前端系列教程》、《tornado一条龙+一个完整版项目》。
- 📝📝本专栏面向广大程序猿，为的是大家都做到Python从入门到精通，同时穿插有很多很多习题，巩固学习。
- 🎉🎉订阅专栏后可私聊进一千多人Python全栈交流群（手把手教学，问题解答）； 进群可领取Python全栈教程视频 + 多得数不过来的计算机书籍：基础、Web、爬虫、数据分析、可视化、机器学习、深度学习、人工智能、算法、面试题等。
- 🚀🚀加入我一起学习进步，一个人可以走的很快，一群人才能走的更远！
canvas图像融合操作
1.globalCompositeOperation属性
此属性作用：设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像融合</title>
<style type="text/css">
#c
border: 1px solid blue;
</style>
</head>
<body>
<canvas id="c" width="1500" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
// 实心矩形
ctx.fillStyle = "red";
ctx.fillRect(100,100,400,400);
// ------------------------------------------------------------------------------------------
// globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 |
// 目标图像：已经存在于画布的内容; |
// 源图像：当前要画到画布上的内容。 |
// ------------------------------------------------------------------------------------------
// source-over:默认。目标图像和源图像都显示，源图像会显示在目标图像上； |
// source-in:只会显示源图像，而且只显示和目标图像重叠的部分，目标图像是透明的； |
// source-atop:目标图像和源图像都会显示，但是源图像在上面，而且只显示重叠的源图像； |
// source-out:只会显示源图像，而且只显示和目标图像不重叠的部分； |
//-------------------------------------------------------------------------------------------
// destination-over:目标图像和源图像都显示，目标图像会显示在源图像上； |
// destination-in:只会显示目标图像，而且只显示和源图像重叠的部分，源图像是透明的； |
// destination-atop:目标图像和源图像都会显示，但是目标图像在上面，而且只显示重叠的目标图像； |
// destination-out:只会显示目标图像，而且只显示和源图像不重叠的部分； |
// ------------------------------------------------------------------------------------------
// 拓展： |
// xor:目标图像和源图像都显示，但是二者重叠部分均不显示； |
// copy:只显示源图像，不显示目标图像； |
// lighter:目标图像和源图像都显示，重叠部分颜色融合； |
ctx.globalCompositeOperation = "source-out";
// 实心圆
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(500,500,100,0,Math.PI*2,false);
ctx.fill();
</script>
</html>
2.实践：
①将canvas画布填充为灰色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像融合2</title>
<style type="text/css">
#c1
border: 1px solid black;
</style>
</head>
<body>
<canvas id="c1" width="1200" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c1");
var ctx = c.getContext("2d");
// 实心矩形填满画布
ctx.fillStyle = "gray";
ctx.fillRect(0,0,c.width,c.height);
</script>
</html>
②在灰色画布上绘制一个实心圆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像融合2</title>
<style type="text/css">
#c1
border: 1px solid black;
</style>
</head>
<body>
<canvas id="c1" width="1200" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c1");
var ctx = c.getContext("2d");
// 实心矩形填满画布
ctx.fillStyle = "gray";
ctx.fillRect(0,0,c.width,c.height);
// 绘制一个实心圆
ctx.beginPath();
ctx.arc(400,400,150,0,Math.PI*2,false);
ctx.fillStyle = "red";
ctx.fill();
</script>
</html>
③实现实心圆部分挖空
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像融合2</title>
<style type="text/css">
#c1
border: 1px solid black;
</style>
</head>
<body>
<canvas id="c1" width="1200" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c1");
var ctx = c.getContext("2d");
// 实心矩形填满画布
ctx.fillStyle = "gray";
ctx.fillRect(0,0,c.width,c.height);
// 目标图像和源图像重叠部分不显示
ctx.globalCompositeOperation = "destination-out";
// 绘制一个实心圆
ctx.beginPath();
ctx.arc(400,400,150,0,Math.PI*2,false);
ctx.fillStyle = "red";
ctx.fill();
</script>
</html>
④绘制圆的外接正方形并让此外接正方形显示在上层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图像融合2</title>
<style type="text/css">
#c1
border: 1px solid black;
</style>
</head>
<body>
<canvas id="c1" width="1200" height="700"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c1");
var ctx = c.getContext("2d");
// 实心矩形填满画布
ctx.fillStyle = "gray";
ctx.fillRect(0,0,c.width,c.height);
// 目标图像和源图像重叠部分不显示
ctx.globalCompositeOperation = "destination-out";
// 绘制一个实心圆
ctx.beginPath();
ctx.arc(400,400,150,0,Math.PI*2,false);
ctx.fillStyle = "red";
ctx.fill();
// destination-over:目标图像和源图像都显示，目标图像会显示在源图像上；
ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillStyle = "blue"
ctx.fillRect(250,250,300,300);
</script>
</html>
3.实现放大镜
- 在图片上任意位置点击随意移动，松开鼠标取消
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画图像</title>
<style type="text/css">
#c
border: 1px solid black;
</style>
</head>
<body>
<canvas id="c" width="538" height="940.5"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var jb = c.getContext("2d");
// 创建一个图片对象
var img = new Image();
// 指定图片地址 此处使用相对定位！
img.src = 'img/1.jpeg';
// 注意：图片不能直接放canvas上，需要通过事件.onload加载，不然图片可能因为没有加载完成而未出现在画布
img.onload = function()
jb.drawImage(this,0,0,538,940.5)
// 监听canvas的onmousedown事件
c.onmousedown = function(ev)
c.onmousemove = function(e)
// 先清空画布
jb.clearRect(0,0,538,940.5);
// 再绘制图像
jb.drawImage(img,0,0,538,940.5);
// 获取鼠标位置相对于画布左上角的坐标
var x = e.pageX-c.offsetLeft;
var y = e.pageY-c.offsetTop;
var r = 100;
// 配合下面放大用的圆实现镂空
jb.globalCompositeOperation ="destination-out";
// 实现点击生成放大用的圆
jb.beginPath();
jb.arc(x,y,r,0,Math.PI*2,false);
jb.fill();
jb.globalCompositeOperation = "destination-over";
var x1 = x * 2 - r;
var y1 = y * 2 - r;
var w1 = 2 * r;
var h1 = 2 * r;
var x2 = x - r;
var y2 = y - r;
var w2 = 2 * r;
var h2 = 2 * r;
// 在圆里绘制放大的部分图片
jb.drawImage(img,x1,y1,w1,h1,x2,y2,w2,h2);
c.onmouseup = function(ev)
// 取消onmousemove事件
c.onmousemove = null;
// 先清空画布
jb.clearRect(0,0,538,940.5);
// 再绘制图像
jb.drawImage(img,0,0,538,940.5);
</script>
</html>
以上是关于Canvas的globalCompositeOperation属性详解和小练习&&实现放大镜的主要内容，如果未能解决你的问题，请参考以下文章