canvas合成和裁剪

  1. 属性

    globalCompositeOperation=type       设置覆盖类型
    source-over 源覆盖在目标上
    source-in 源覆盖在目标上的公共部分(只取源图形的部分)
    source-out 源覆盖在目标上以外的部分
    source-atop 源覆盖在目标上的公共部分与目标的交集
    destination-over 目标覆盖在源上
    destination-in
    destination-out
    destination-atop
    lighter 目标和源公共部分颜色值相加,结果是颜色更亮
    copy 只显示源
    xor 去除源和目标的公共部分
    multiply 目标和源公共部分颜色值相乘,结果是颜色更暗
    screen 比lighter的效果更light
    overlay multiply和screen的混合作用
    darken 保留目标和源像素最暗的部分
    lighten 保留目标和源像素最亮的部分
    color-dodge
    color-burn
    hard-light
    soft-light
    difference
    exclusion
    hue
    saturation
    color
    luminosity ctx.clip(); 裁剪一块儿区域
  2. 合成使用示例

    ctx.fillStyle='blue';
    ctx.fillRect(150,150,200,200) // 源图形
    ctx.globalCompositeOperation="source-over";
    ctx.fillStyle='orange';
    ctx.fillRect(100,100,200,200); // 目标图形
  3. 裁剪使用示例

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d'); ctx.beginPath();
    ctx.arc(200, 200, 60, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.clip(); ctx.fillStyle="green";
    ctx.fillRect(150,150,50,50);

canvas合成和裁剪的更多相关文章

  1. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  2. <canvas合成海报>所遇问题及解决方案总结

    最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...

  3. 通过canvas合成图片

    通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...

  4. html5 canvas 笔记五(合成与裁剪)

    组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...

  5. HTML5 canvas 合成属性

    合成属性 globalAlpha                                设置或返回绘图的当前 alpha 或透明值 globalCompositeOperation       ...

  6. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

  7. 离线合成联想到的--canvas合成水印

    前段时间做了功能模块:用户设置自定义勋章: 实现方式:前端把用户设置的昵称传到后台,后台根据不同用户等级,使用离线合成技术合成不同的勋章返回到前端: 方案算是实现了,但是有点坑就是,后台的离线合成没有 ...

  8. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  9. 动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

    在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...

随机推荐

  1. oracle: sql语句报ora-01461/ora-00911错误

    oracle: sql语句报ora-01461/ora-00911错误 ora-00911:sql语句中可能含有特殊字符,或者sql语句中不能用";"分号结尾. sql语句报ora ...

  2. linux下运行jar

    方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二: java -jar XXX.jar ...

  3. E: 无法获得锁 /var/cache/apt/archives/lock - open (11 资源临时不可用)

    事件: 今软件包有更新,进入更新管理器,点击安装更新,出现错误. 错误提示: E: 无法获得锁 /var/cache/apt/archives/lock - open (11 资源临时不可用) E: ...

  4. sqlserver版本分类下载以及各个版本之间的区别是什么

    很多用visual studio做开发的朋友经常会用到sqlserver数据库,但是往往在选择的时候就不知道该使用哪个版本了,今天亦是美网络就给大家分享一下sqlserver各个版本之间的区别,以及各 ...

  5. iOS-程序启动原理和UIApplication

    iOS开发UI篇—程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就 ...

  6. this 知多少

    js 中的this 到底指向哪里涅,学习js的过程中,肯定有不少小伙伴们调入this的大坑中,究其原因,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁...曾经,我 ...

  7. [团队项目]Scrum 项目1.0 (演说视频)

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 2.SCRUM 流 ...

  8. 使用xUnit为.net core程序进行单元测试(2)

    第一部分: http://www.cnblogs.com/cgzl/p/8283610.html 下面有一点点内容是重叠的.... String Assert 测试string是否相等: [Fact] ...

  9. CentOS6.6安装(转)

    2015-3-6CentOS6.6安装 环境:工控机 1.选择安装software development workstation,其他参考以下文档过程 一.安装CentOS 6.6,安装结束重新启动 ...

  10. Spring Cloud 入门 之 Eureka 篇(一)

    原文地址:Spring Cloud 入门 之 Eureka 篇(一) 博客地址:http://www.extlight.com 一.前言 Spring Cloud 是一系列框架的有序集合.它利用 Sp ...