<!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. MySQL实现类似Oracle的序列

    MySQL实现类似Oracle的序列 2013-10-22 10:33:35     我来说两句      作者:走过的足迹 收藏    我要投稿 MySQL实现类似Oracle的序列   Oracl ...

  2. linux中mysql密码找回的两种方式

    方法一:修改my.cnf配置文件 1．首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的  ...

  3. win7 or win8 系统访问2003系统上的数据库很慢

    解决方式, 执行当前命令即可  netsh interface tcp set global autotuninglevel=disabled 

  4. Android样式的开发:drawable汇总篇

    Android有很多种drawable类型,除了前几篇详细讲解的shape.selector.layer-list,还有上一篇提到的color.bitmap.clip.scale.inset.tran ...

  5. 如何在mac os中安装gdb及为gdb进行代码签名

    1. 安装gdb GDB作为一个强大的c/c++调试工具,一直是程序猿们的良好伴侣,但转到Mac os才发现竟然没有默认安装,所幸还有强大的homebrew工具: brew install homeb ...

  6. [转]relative、absolute和float

    position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...

  7. java trim

    rim方法一般用来去除空格,但是根据JDK API的说明,该方法并不仅仅是去除空格,它能够去除从编码’\u0000′ 至 ‘\u0020′ 的所有字符. 回车换行也在这20个字符之中,以下是一个示例: ...

  8. Hadoop第10周练习—Mahout部署及进行20newsgroup数据分析例子

    :搭建Mahout环境 :运行20newsgroup 内容 运行环境说明 1.1 硬软件环境 线程,主频2.2G,6G内存 l  虚拟软件:VMware® Workstation 9.0.0 buil ...

  9. 读Avoiding the Disk Bottleneck in the Data Domain Deduplication File System

    最近在思考和实践怎样应用重复数据删除技术到云存储服务中.找了些论文来读,其中<Avoiding the Disk Bottleneck in the Data Domain Deduplicat ...

  10. android高级---->AsyncTask的源码分析

    在Android中实现异步任务机制有两种方式,Handler和AsyncTask,它在子线程更新UI的例子可以参见我的博客(android基础---->子线程更新UI).今天我们通过一个小的案例 ...