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();
效果如图:
html5 合成两张图片,HTML5 Canvas笔记——图像合成相关推荐
- HTML5两个画布如何弄,有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
- js实现拖拽合成两张图片和文字,并包括 即时生成的二维码
参考链接 合成图片 https://blog.csdn.net/qq_43789643/article/details/107461585 主要参考 https://blog.csdn.net/wei ...
- java合成两张图片并在图片上写字
原文地址:http://blog.csdn.net/wodemaya8/article/details/45248481 创建一张原始图片 BufferedImage img = new Buffer ...
- android将两张图片合并为一张图片
合成两张图片 通过canvas绘制合成 private Bitmap mergeBitmap(Bitmap firstBitmap, Bitmap secondBitmap) {int w1 = fi ...
- 使用Vue将两张图片叠加再保存为一张图片下载
最终效果 将一张课程图片和一张二维码图片叠加(网上图片随便乱找,勿对号入座!!!) 步骤 先将两张图片使用css进行叠加,然后按照自己需求将图片移动到合理位置 要使用到一个插件将两张图片转为canva ...
- matlab两张图片合成一张_11. 图像合成与图像融合
本文同步发表在我的微信公众号"计算摄影学",欢迎扫码关注 [转载请注明来源和作者] 我们终于进入了新的篇章.这一次我来给大家介绍一下图像合成与融合. 我们经常看到一些很奇妙的PS技 ...
- 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
- html5如何让多张图片重叠,css怎么让两张图片重叠?
css怎么让两张图片重叠?下面本篇文章给大家介绍一下使用CSS让两张图片重叠的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让两张图片重叠? 想要使用css把两个图 ...
- html5是什么材料,HTML_HTML5 Canvas标签使用收录, 一、基本概念
什么是Canva - phpStudy...
HTML5 Canvas标签使用收录 一.基本概念 什么是Canvas 是一个新的 HTML 元素,这个元素在 HTML5 中被定义.这个元素通常可以被用来在 HTML 页面中通过 JavaScri ...
- photoshop图像合成教程之将人物和风景合成一张图片
photoshop教程中图像合成在图像处理中占有重要地位,本篇ps图像合成教程使用两幅素材:人物和风景,将其合成到一幅图像中. 使用到的PS知识点不复杂,图层蒙版和画笔即可完成. ps图像合成教程 ...
最新文章
- C#中结构数据类型的使用
- 畅玩mt3单机游戏服务器维护,【梦幻西游】MT3仿端手工游戏服务端源码[教程+授权物品后台]...
- 一直在构建版本_球鞋 | 一鞋两穿?AJ1十孔版本登场,拉链设计还是真香了?
- 如何向前一个Fragment回传信息?
- 电脑组装与维护教程_男,78年,懂电脑组装、运营维护青岛地区寻找电脑维护合适岗位...
- #1123-JSP隐含对象
- 阿里云大数据利器之-RDS迁移到Maxcompute实现动态分区
- jQuery 事件函数传参异常identifier starts immediately after numeric literal
- promise A+ 原理
- Android内核开发:图解Android系统的启动过程
- Android Studio 控制台输出中文乱码
- 佳能g2810提示5b00_canon佳能G1810 G2810 G3810 打印机5b00清零软件操作教程
- MySQL数据库的多种连接方式及工具
- MaxDOS 网刻服务端网刻教程。
- appleID有必要开双重认证吗!
- 设备管理 android问号,设备管理查有问号怎么修理
- python语言初学
- 数据分析的六大黄金法则
- CHIL-SQL-WHERE 子句
- 控制系统分析2(线性系统稳定性、和可控性)