<!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. 2012年中国科学技术信息研究所发布自然科学SCI（E）论文期刊分区列表

    分区 期刊名称 ISSN 学科名称 学科名称(中文) 总被引频次 影响因子 5年影响因子 即年影响因子 被引半衰期 特征因子 论文影响指标 1区 ACM COMPUT SURV 0360-0300 C ...

  2. Linux发行版大全

    基于Debian  Adamantix:基于Debian,特别关注安全.  Amber Linux:基于Debian,针对拉脱维亚用户作了一些定制.  ASLinux Desktop:西班牙语,基于D ...

  3. #ifdef 和 #if defined 的区别 -- 转

    #ifdef 和 #if defined 的区别在于,后者可以组成复杂的预编译条件,比如 #if defined (AAA) && defined (BBB) xxxxxxxxx #e ...

  4. 代码演示用 .NET 4.5 （C# 5.0）自带的压缩类 ZipArchive 创建一个压缩文件

    代码如下: using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; ...

  5. css省略号布局实例截图

    过多文字li标签出现使用css省略号样式截图 使用text-overflow样式让显示不完内容通过css实现省略号排版

  6. Enjoy Android

    大趋势所迫,开始学习Android, @mark一下

  7. jQuery相册预览简单实现（附源码）

    1.CSS样式 <style type="text/css"> html,body,.viewer,.viewer .pic-list,.viewer .pic-lis ...

  8. C#实用杂记-EF全性能优化技巧2

    原文链接: http://www.cnblogs.com/zhaopei/p/5721789.html

  9. oracle的minus返回第一个表中有、第二个表中没有的数据

    oracle的minus返回第一个表中有.第二个表中没有的数据 CREATE TABLE hovertree_union_1 ( id INT, val ) ); CREATE TABLE hover ...

  10. 多余的Using Namespaces或引用会影响程序的执行效率么？

    在.NET程序编写中,需要using相应命名空间或添加相应的References,可有时候没有使用到的命名空间也被添加到了Using Namespaces中,那么,这样会影响程序的执行效率么? 通过示 ...