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

以上是HTML 5 canvas globalCompositeOperation 属性

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="red";

ctx.fillRect(20,20,75,50);

ctx.fillStyle="blue";

ctx.globalCompositeOperation="source-over";

ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";

ctx.fillRect(150,20,75,50);

ctx.fillStyle="blue";

ctx.globalCompositeOperation="destination-over";

ctx.fillRect(180,50,75,50);	

</script>

</body>

</html>

HTML 5 canvas globalAlpha 属性    globalAlpha=0-1;

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="red";

ctx.fillRect(20,20,75,50);

//Turn transparency on

ctx.globalAlpha=0.2;

ctx.fillStyle="green";

ctx.fillRect(50,50,75,50);

ctx.fillStyle="blue";

ctx.fillRect(80,80,75,50);

</script>

</body>

</html>

以上2段为W3SCHOOL上的说明：昨天我写到了，API经过国外翻译之后可能翻译的结果让人感觉无语 所以多实践 才能提高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>canvas合成</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

        var context = theCanvas.getContext("2d")

    }

    drawScreen();

    function drawScreen(){

        //在屏幕上绘制一个大方块

        context.fillStyle = "black";

        context.fillRect(10,10,200,200);

        //保留globalCompositeOperation原有值不变

        //现在绘制一个红色正方形

        context.fillStyle = "#ff0000";

        context.fillRect(1,1,50,50);

        //现在设置为source-over

        context.globalCompositeOperation = "source-over";

        context.fillRect(60,1,50,50);

        //现在设置为destination-over

        context.globalCompositeOperation = "destination-over";

        context.fillRect(1,60,50,50);

        //现在设置globalAlpha

        context.globalAlpha = .5;

        //现在设置source-atop

        context.globalCompositeOperation = "source-atop";

        context.fillRect(60,60,50,50);

     }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

html5 canvas画布上合成的更多相关文章

  1. Html5 Canvas 实现图片合成

    多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  2. 微信小程序 在canvas画布上划动，页面禁止滑动

    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...

  3. HTML5 Canvas 画布

    一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...

  4. html5——canvas画布

    一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...

  5. 前端手势控制图片插件书写三（将transform变化应用在图片和canvas画布上）

    注意:transform的scale为负数时,图片会垂直翻转 一.在使用transform将计算得到的变化应用到图片上后,需要考虑到我们每次计算的都是touchmove中本次的差量.在第一次移动过后. ...

  6. HTML5 canvas画布写炫彩动态的倒计时效果

    html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...

  7. 小程序-生成一个小程序码画在canvas画布上生成一张图片分享出去

    这个需求我遇到过2次.一次是在识别二维码后跳转到其它页面,另一次是识别二维码后进入到生成小程序码的当前页面. 我有一个梦想,就是成为一名黑客!!!!!! 小程序中js wx.request({     ...

  8. css总结19:HTML5 Canvas(画布)

    1  <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...

  9. canvas画布上定位点击位置

    两种方法: 1. cvs.onclick = function (e) { if (e.offsetX || e.layerX) { var x = e.offsetX == undefined ? ...

随机推荐

  1. 测试开发：Python+Django实现接口测试工具

    Python+Django接口自动化 引言: 最近被几个公司实习生整自闭了,没有基础,想学自动化又不知道怎么去学,没有方向没有头绪,说白了其实就是学习过程中没有成就感,所以学不下去.出于各种花里胡哨的 ...

  2. MatCap冰冻效果Shader

    MatCap方案 使用说明 制作合适的MatCap贴图 这张图决定冰像不像,网上找.Vray渲个球.ASE或者ShaderForge连,甚至直接手绘,总之只要一张长得像下面的图 注意MatCap图只有 ...

  3. Redmine 安装指南

    第一种方式 (一键安装): 准备工作: 1.最小化安装CentOS7 2.更新YUM源 3.更新系统关闭防火墙 yum -y update systemctl stop firewalld syste ...

  4. 利用十字链表压缩稀疏矩阵（c++）-- 数据结构

    题目: 7-1 稀疏矩阵 (30 分)   如果一个矩阵中,0元素占据了矩阵的大部分,那么这个矩阵称为“稀疏矩阵”.对于稀疏矩阵,传统的二维数组存储方式,会使用大量的内存来存储0,从而浪费大量内存.为 ...

  5. php OPcache

    众所周知php是一种解释型语言,它的执行可分为如下几个流程: Scanning(Lexing) ,将PHP代码转换为语言片段(Tokens) Parsing, 将Tokens转换成简单而有意义的表达式 ...

  6. 《Linux内核分析》第二周笔记 操作系统是如何工作的

    操作系统是如何工作的 一.函数调用堆栈 1.三个法宝 计算机是如何工作的?(总结)——三个法宝(存储程序计算机.函数调用堆栈.中断机制) 1)存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: ...

  7. Elasticsearch学习系列之term和match查询

    lasticsearch查询模式 一种是像传递URL参数一样去传递查询语句,被称为简单查询 GET /library/books/_search //查询index为library,type为book ...

  8. Linux 文件系统介绍

    目录 1.Linux 分区简介 2.文件的类型 3.文件的属性与权限 4.直达底部 一.Linux 分区简介 与 windows 通过 盘符管理各个分区不同,Linux把所有设备和文件都当作文件来管理 ...

  9. python自动化之调试

    #####调试 #####查看日志与断言 ''' 抛出异常使用raise语句.在代码中,raise语句包含以下部分: (1)raise关键字; (2)对Exception函数的调用; (3)传递给Ex ...

  10. 一本通1669S-Nim

    1669:S-Nim [输入样例] 2 2 5 3 2 5 12 3 2 4 7 4 2 3 7 12 5 1 2 3 4 5 3 2 5 12 3 2 4 7 4 2 3 7 12 0 [输出样例] ...