canvas绘图中的图片组合

时间2020-4-4周六（第一次写，也就是一个学习总结）
- 1.canvas简介
- canvas使用方法
- 各种样式及例子(只需要在两个图片的代码中加入globalCompositeOperation属性)
- - 1.source-over
  - source-atop
  - source-in
  - source-out
  - destination-over
  - destination-atop
  - destination-in
  - destination-out
  - lighter
  - copy
  - - 总结

时间2020-4-4周六（第一次写，也就是一个学习总结）

1.canvas简介

Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas使用方法

获取画布

let canvas=document.getElementById("canvas");

获取画笔

let context=canvas.getContext("2d");

后面就可以开始画图了

context.arc(80,0,80,0,Math.PI,false);//前两个数字是圆心坐标，第三个数字是半径，(0，Math.PI)，false顺时针

各种样式及例子(只需要在两个图片的代码中加入globalCompositeOperation属性)

1.source-over

默认样式（和不设置globalCompositeOperation属性一样）。
在目标图像上(先画的)显示源图像(后画的)

context.globalCompositeOperation="source-over";

效果展示

source-atop

在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

<canvas id="canvas" height="500" width="500"><p>您的浏览器不支持canvas</p>
</canvas>
<script type="text/javascript">//绘制圆形let canvas=document.getElementById("canvas");let context=canvas.getContext("2d");//第一种context.fillStyle = "red";//设置填充颜色（风格）context.beginPath();context.arc(40,250,30,0,Math.PI*2,true);context.closePath();//填充颜色需要关闭路径context.fill();//开始填充context.globalCompositeOperation="source-atop";//关键代码context.fillStyle = "green";context.beginPath();//开始路径context.arc(70,250,25,0,Math.PI*2,true);context.closePath();//填充颜色需要关闭路径context.fill();//开始填充
</script>

效果展示

source-in

相当于第二个图像覆盖了第一个图像，但两个图形都变成透明的，只有重叠的地方显色（因为第一个图形被覆盖，所以显色为第二个图形颜色）

context.globalCompositeOperation="source-in";

效果展示

source-out

第一个图形覆盖住第二个图形，并变得透明，第二个图形不受影响（只不过被覆盖的地方无法显色）

context.globalCompositeOperation="source-out";

效果展示

小结：前面四种和后面四种效果完全一样，只不过覆盖顺序改反过来了

destination-over

在源图像上方显示目标图像。

context.globalCompositeOperation="destination-over";

效果展示

destination-atop

在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

context.globalCompositeOperation="destination-atop";

效果展示

destination-in

第一个图形覆盖第二个图形，全部透明，只有重叠部分显色（第一个图形的颜色）

context.globalCompositeOperation="destination-in";

效果展示

destination-out

第一个图形覆盖第二个图形，第二个图形所在区域全部透明

context.globalCompositeOperation="destination-out";

效果展示

lighter

两个图形都显色，重叠部分颜色融合

context.globalCompositeOperation="lighter";

copy

这个属性写在哪个图形后面，哪个图形就透明不显色

context.globalCompositeOperation="copy";

效果展示

总结

1.globalCompositeOperation这个属性有目标性（自己总结的用词可能不是很准确），写在哪一个图形后面，哪一个图形就是第一个图形，就算是写在最后面的代码上面，那么哪一个代码组成的图形就为组合的时候的第一个图形
2.1-4的属性和5-8的属性基本一一对应，不同点是1-4是第一个图形被覆盖，5-8是第二个图型被覆盖。

canvas绘图中的图片组合相关推荐

科研绘图中的图片格式问题
本文分析了所有主流图片格式的优缺点. 科研绘图中的图片格式问题科研论文投稿需要根据期刊的要求上传符合要求的图片,以下为科研绘图中相关格式问题汇总. 1 位图和矢量图的区别位图(Bitmap) 又称 ...
如何抓取canvas画布中的图片
如何抓取canvas画布中的图片网络页面中存放图片的形式有很多这里说一下canvas格式时怎么获取 String fullImgJs = "return document.getElem ...
Android中Canvas绘图基础详解（附源码下载）
看到了一篇比较详细的Canvas文章,转过来方便自己查看. 源地址:http://blog.csdn.net/iispring/article/details/49770651 Android中,如果 ...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
目录一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画二.WebGL 2.1.HTML ...
canvas绘图色块区域+多边形区域色块显示功能
介绍:底部是一张图片,在图片绘图,把区域色块绘制出来,显示在图片上,呈现区域划分的效果. 支持:uniapp项目,目前只支持小程序.APP(H5不支持) 使用:开源,具体下载代码,运行小程序即可 ca ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
浅谈android中的图片处理之基本绘图(一)
从今天开始我来聊下关于android中的图片处理以及android中绘图的基本用法.大家都知道android中的图片的巧妙使用会给UI得到一个很好的用户体验.所以掌握处理图片的基本技巧很是重要.那就开 ...
php中在网页中显示图片代码,用PHP将网页上的Canvas图像保存到服务器上的方法
在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意 ...

canvas绘图中的图片组合

canvas绘图中的图片组合

时间2020-4-4周六（第一次写，也就是一个学习总结）

1.canvas简介

canvas使用方法

各种样式及例子(只需要在两个图片的代码中加入globalCompositeOperation属性)

1.source-over

source-atop

source-in

source-out

destination-over

destination-atop

destination-in

destination-out

lighter

copy

总结

canvas绘图中的图片组合相关推荐

最新文章

热门文章