<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

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

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,canvas,div,select,option {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #666;

 }

 #can {

     display: block; margin: 25px auto; background: #FFF; border-radius: 2px;

 }

 </style>

 <script type='text/javascript'>

     $( document ).ready( function(){

         var can = $( '#can' ).get( 0 );

         var oCan = can.getContext( '2d' );

         oCan.beginPath();

         oCan.fillStyle = '#F00';

         oCan.fillRect( 100 , 100 , 100 , 100 );

         oCan.save();

         oCan.globalAlpha = .5;

         /*

             global : 全球

             composite : 混合物

             operation : 操作 作用

             object.globalCompositeOperatin    : 设置或返回新图像是如何绘制到已有的图像上的

             属性:

                 原图像指后绘制的图像,目标图像指已经存在的图像

                 source-over : 默认 设置目标图像显示在原图像上

                 source-atop : 在目标图像的顶部显示原图像,原图像位于目标图像之外的部分是不可见的

                 source-in : 在目标图像中显示原图像,只有目标图像中的原图像会部分显示,目标图像是透明的

                 source-out : 在目标图像之外显示原图像,只会显示目标图像之外的原图像部分,目标图像是透明的

                 destination-over : 在原图像上方显示目标图像

                 destination-atop: 在原图像的顶部显示目标图像,原图像之外的目标图像部分是不可见得

                 destination-in : 在原图像中显示目标图像,只有愿图像内的目标图像会部分得以显示,原图像是透明

                 destination-out:在原图像之外显示目标图像,只会显示原图像外的目标图像会部分得以显示,愿图像透明

                 lighter : 愿图像+目标图像 (交互部分会以合成颜色进行显示)

                 copy : 显示原图像 , 忽视目标图像

                 xor : 使用异或对原图像和目标图像进行整合

          */

         /* oCan.globalCompositeOperation = 'source-over'; */

         /* oCan.globalCompositeOperation = 'destination-over';     */

         /* oCan.globalCompositeOperation = 'source-atop'; */

         /* oCan.globalCompositeOperation = 'destination-atop'; */

         /* oCan.globalCompositeOperation = 'source-in'; */

         /* oCan.globalCompositeOperation = 'destination-in'; */

         /* oCan.globalCompositeOperation = 'source-out'; */

         /* oCan.globalCompositeOperation = 'destination-out'; */

         /* oCan.globalCompositeOperation = 'lighter'; */

         /* oCan.globalCompositeOperation = 'copy'; */

         /* oCan.globalCompositeOperation = 'xor'; */

         oCan.globalCompositeOperation = 'destination-in';

         oCan.fillStyle = '#0F0';

         oCan.fillRect( 150 , 150 , 100 , 100 );

         oCan.restore();

         oCan.closePath();

     } )

 </script>

 </head>

 <body>

     <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低请升级您的浏览器以获取更好的用户体验...</canvas>

 </body>

 </html>

[ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示的更多相关文章

  1. Extjs中Chart利用series的tips属性设置鼠标划过时显示数据

    效果如下: 从官网找到的例子,大家参考下吧.源码: Ext.require('Ext.chart.*'); Ext.require('Ext.layout.container.Fit'); Ext.o ...

  2. html对a标签的运用以及属性，img图像标签的属性及应用

    今天学习的难点自我感觉在于a标签超链接的应用.不是很熟练,晚上回家准备敲敲代码,让a的超链接标签使用的更加熟练,对于上午的img 属性值已经明白 . 还是日常记一下每日的重点   a标签去下划线:a{ ...

  3. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  4. UILable 的 属性设置

    //UILable的大小自适应实例 UILabel *myLable = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];//设定位置与大小 [m ...

  5. HTML 5 canvas globalCompositeOperation 属性

    做一个canvas鼠标跟随动画的时候用到了,就copy w3c的解释整理一番: globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上. 源 ...

  6. （转）第03节：在Canvas上插入图片并设置旋转属性

    我们已经学会了在Canvas上画简单的图形,这节我们就在Canvas上加一张图片.用到fabric.Image对象把图片添加到Canvas上. HTML文件:为了效果更好看我在html里写了一些CSS ...

  7. 如何使用canvas进行2d绘图

    canvas 的 2D context 可以绘制简单的 2D 图形.它的 2D context 坐标开始于 <canvas> 元素的左上角,原点坐标是(0,0).所有的坐标值都基于这个原点 ...

  8. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  9. JAVA学习绘图颜色及其笔画属性设置字体显示文字

    package com.graphics; import java.awt.*; import java.awt.geom.Rectangle2D; import java.util.Date; im ...

随机推荐

  1. 打开 Mac OS X 隐藏的用户资源库文件夹的方法

    在较高版本的 Mac OS X 中,用户的资源库文件夹(/Users/username/Library)默认被系统隐藏了,从 Finder 窗口中不能直接打开. 但是通过下面这个方法可以快速打开用户资 ...

  2. win8磁盘占用100%的12种解决办法

    解决方法1:硬盘4K对齐,能减少磁盘占用100%情况.(大部分用户能解决) 解决方法2:检查硬盘AHCI驱动是否安装 解决方法3:通过 HD Tune Pro 5 专业的硬盘测试工具 检测硬盘健康度, ...

  3. sitemesh学习笔记(1)

    最近在学习web开发的时候,发现很多的页面都存在同样的导航栏,登陆栏,js,jQuery等等相同的元素.这样就感觉开发变得好臃肿啊,并且,有时候改一个元素,就要把所有包含这个元素的页面全部重新码一遍, ...

  4. 我写的一个ExcelHelper通用类，可用于读取或生成数据

    读取或生成EXCEL数据的方法有很多,一般常见的有: 1.通过OFFICE EXCEL组件,优点:读取与生成EXCEL文件方便,缺点:服务器上必须安装OFFICE软件,且进程无法及时释放 2.通过第三 ...

  5. [转]AutoResetEvent 与 ManualResetEvent区别

    在C#多线程编程中,这两个类几乎是不可或缺的,他们的用法/声明都很类似,那么区别在哪里了? Set方法将信号置为发送状态 Reset方法将信号置为不发送状态 WaitOne等待信号的发送 其实,从名字 ...

  6. 转载：第三弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿，每日更新！

    感谢朋友们的支持!这两天博卡君收到了很多支持和安慰,也认识了很多志同道合的朋友.目前微信公布的工具和代码都不是正式版,随时有可能调整,大家先体验和学习为主吧.最近这个教程搞得我也心力交瘁了,虽然苦逼, ...

  7. 个人阅读作业Week17

      个人阅读作业Week17 reading buaa software   解决的问题 这是提出问题的博客链接:http://www.cnblogs.com/SivilTaram/p/4830893 ...

  8. [ASP.NET] 结合Web API在OWIN下实现OAuth

    OAuth(Open Authorization) 为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAuth的授权不会使第三方触及到用户的帐号信息(如用户名与密码), ...

  9. [CLR via C#]19. 可空值类型

    我们知道,一个值类型的变量永远不可能为null.它总是包含值类型本身.遗憾的是,这在某些情况下会成为问题.例如,设计一个数据库时,可将一个列定义成为一个32位的整数,并映射到FCL的Int32数据类型 ...

  10. 【循序渐进学Python】10.模块和包

    1.导入模块 任何Python程序都可以作为模块导入,只要Python解释器能找到我们定义的模块所在位置即可,一般来讲,在一个模块被导入时,Python解释器会按照下面的步骤进行搜索: 在当前所在目录 ...