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. c++日志记录模块

    C++ 日志记录模块 该模块从实际项目中产生,通过extern声明的方式,可在代码不同模块中生成日志,日志文件名称为随机码加用户指定名称,采用随机码是为了避免日志文件可能被覆盖的问题. 愿意的话你也能 ...

  2. 并发系列(一)-----synchronized关键字

    一 简介 说到并发不得不提的synchronized,synchronized关键字是元老级别的角色.在Java SE 1.6之前synchronized被称为是重量,在1.6之后对同步进行了一系列的 ...

  3. linux重启tomcat的shell脚本

    基本思路: 先检查待重启的tomcat的进程是否存在 存在则执行shutdown. 然后再次检查进程是否还存在,不存在则执行kill 然后删除工作空间及10天前的日志. 最后执行启动. #!/bin/ ...

  4. LeetCode-97.交错字符串

    给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的. 示例 1: 输入: s1 = "aabcc", s2 = "dbbca&quo ...

  5. Linux实验报告

    第一次链接: http://www.cnblogs.com/L1nke/p/4966820.html 第二次链接: http://www.cnblogs.com/L1nke/p/4992758.htm ...

  6. Where To Buy -- proposed by Renqian Luo

    Need 周末在公司加班,公司食堂不开饭,就会想到点外卖.手机里好多外卖APP,同样的店家在不同平台的优惠活动可能不一样,A这边满20减10,B那边满20只减5,但是那边好像有优惠券可以用唉,等等,C ...

  7. SQL Server Collation解惑

    某些产品会有固定的DB Collation,如果提前创建DB的时候没有按照要求指定对应的Collation,这个时候就会报错,提示你Collation不匹配.在安装SQL Server的时候有时候需要 ...

  8. 4种PHP回调函数风格

    4种PHP回调函数风格 匿名函数 $server->on('Request', function ($req, $resp) use ($a, $b, $c) { echo "hell ...

  9. 如何运行spring项目,并打成jar包进行发布

    一.创建spring项目 1.创建项目 2.创建moudule,选择java类型即可. 3.创建lib文件,引入spring的4个核心包spring-beans.spring-context.spri ...

  10. sysbench的安装与简单使用

    1. 下载sysbench的文件 https://codeload.github.com/akopytov/sysbench/zip/1.0.15 2. 放进linux机器以及进行解压缩 unzip ...