canvas笔记-globalAlpha和globaleCompositeOperation的使用

如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");for(let i = 0; i < 100; i++){let R = Math.floor(Math.random() * 255);let G = Math.floor(Math.random() * 255);let B = Math.floor(Math.random() * 255);context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";context.beginPath();context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);context.fill();}}</script></body>
</html>

程序运行截图如下：

修改脚本添加globalAlpha属性后，代码如下：

<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.globalAlpha = 0.5;for(let i = 0; i < 100; i++){let R = Math.floor(Math.random() * 255);let G = Math.floor(Math.random() * 255);let B = Math.floor(Math.random() * 255);context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";context.beginPath();context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);context.fill();}}</script>

程序运行截图如下：

globalAlpha会将所有元素的透明的进行更改。

下一个是globalCompositeOperation顾名思义就是整体图形复合时的操作，保证哪个在上面，哪个在下面，哪个需要裁剪，哪个要隐藏等等。

其属性值如下：

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

所有属性值对应的效果图是这样的。

下面来一个简单的小栗子

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.globalCompositeOperation = "source-over";context.fillStyle = "red";context.fillRect(20, 20, 75, 50);context.fillStyle = "blue";context.fillRect(50, 50, 75, 50);context.globalCompositeOperation = "destination-over";context.fillStyle = "red";context.fillRect(150, 20, 75, 50);context.fillStyle = "blue";context.fillRect(180, 50, 75, 50);}</script></body>
</html>

canvas笔记-globalAlpha和globaleCompositeOperation的使用相关推荐

html5 canvas修改颜色,html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color设置图形的填充颜色.strokeStyle = color设置图形轮廓的颜色. 透明度 Transparency globalAlpha = tr ...
html5菜鸟教程canvas笔记
简单介绍: canvas(图形容器) 标签是一个默认没有边框和内容的矩形画布,并且通过js实现绘制,js脚本先获取标签的id然后进行控制canvas,比如:1. <canvas id=" ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
html5 canvas 笔记五（合成与裁剪）
组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...
canvas笔记-画三角形并计算其外心（含算法其他绘图框架类似）
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
canvas笔记-文本（fillText）旋转（rotate）
这里fillText直接使用rotate会有问题.估计是旋转中心有问题. 正确的逻辑为: 先使用translate移动中心点在文本起始位置,如何在0,0处fillText即可. 如果要在字符串中心进行 ...
canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
首先是图片放缩程序运行截图如下: 拉动滑动条: 源码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
canvas笔记-canvas中用户与图形交互
运行截图如下: 点击某个圆后: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> ...

canvas笔记-globalAlpha和globaleCompositeOperation的使用

canvas笔记-globalAlpha和globaleCompositeOperation的使用相关推荐

最新文章

热门文章