<!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. [转载]QString 乱谈(3)-Qt5与中文

    原文地址http://blog.csdn.net/dbzhang800/article/details/7542672?reload 两个月前,简单写过QTextCodec中的setCodecForT ...

  2. MyBatis知多少（16）MyBatis映射

    之前我们详细地讨论了MyBatis背后的设计理念以及iBATIS框架是如何产生的.也说明了MyBatis是一个混合型解决方案,它从处理关系数据库的其他不同方法那里借鉴了许多思想.那么MyBatis到底 ...

  3. .NET转Java

    懂C#的话,转Java也不是那么难,毕竟,语言语法还是相似的.尝试了下Java,说说自己的体会吧. 一,Java和C#都是完全面向对象的语言.在面向对象编程的三大原则方面,这两种语言接近得不能再接近. ...

  4. 轻量型ORM框架Dapper的使用

    在真实的项目开发中,可能有些人比较喜欢写SQL语句,但是对于EF这种ORM框架比较排斥,那么轻量型的Dapper就是一个不错的选择,即让你写sql语句了,有进行了关系对象映射.其实对于EF吧,我说下我 ...

  5. django 快速实现session的操作

    说明: 从这一篇开始就不再完整的介绍django项目的创建过程了,因为前面几篇博客中都详细的介绍了这个创建过程,套路都是一样的,熟悉了这个套路,后面要做的是一些细节技术点的学习和练习. 上一节讲到了d ...

  6. Android 学习笔记之AndBase框架学习(一) 实现多功能标题栏

    PS:Volley框架终于通过看源码的方式完成了所有的学习..开始学习AndBase...AndBase的源码实在是多的离谱...因此就不对所有的源码进行分析了... 学习内容: 1.使用AndBas ...

  7. C语言中的经典例题用javascript怎么解？（一）

    C语言中的经典例题用javascript怎么解?(一) 一.1+2+3+……+100=?        <script type="text/javascript">  ...

  8. 2016校招内推 -- 腾讯SNG前端 -- 面试经历

    也是让某湿兄帮忙内推,然后过了四五天,电话打来了 一面: 1.首先是简单的自我介绍 2.你觉得一个前端工程师应该具备什么技能 比如用户体验这个方面他就贵问你具体的例子 3.让你设计一个web站点,假如 ...

  9. Javascript语法去控制Web控件的Enabled属性

    Web控件当使用Enabled属性时,它生成html之后会变成了disabled了.我们为了能够在javascript去控制控件的禁用与启用,得从这个disabled入手.如:

  10. 简单介绍.Net3.0 中跨线程访问控件

    这两天用WPF做一个项目的UI部分时,发现跨线程地访问了UI控件,自然地报异常了.当时找了半天也没在控件中找到InvokeRequired属性和Invoke方法,郁闷之极.....最后发现在.net3 ...