<!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. Legolas工业自动化平台入门（二）数据响应动作

    在上一篇文章Legolas工业自动化平台入门(一)搭建应用里,我们简单地提到了"动作"的概念.不清楚的童鞋不要着急,这篇我们就来介绍如何在Legolas平台上添加动作,并应用动作. ...

  2. [CS231n-CNN] Linear classification II, Higher-level representations, image features, Optimization, stochastic gradient descent

    课程主页:http://cs231n.stanford.edu/ loss function: -Multiclass SVM loss: 表示实际应该属于的类别的score.因此,可以发现,如果实际 ...

  3. C#基础总结之八面向对象知识点总结-继承与多态-接口

    .方法深入讲解(返回值,形参与实参) 方法 public int getName(int i,int j) { int sum = i + j; return sum; } .利用泛型存储对象数据 . ...

  4. `cocos2dx非完整` 开始自己的FW模块

    上一篇的文章中说到了一些个人习惯的东西以及一些简单的项目配置,这一篇文章我们来进一步完善一些东西.首先,打开编译以后的客户端执行,会看到一大堆的fileutils加载luac文件的提示,在终端显示一大 ...

  5. mysql 语句case when

    CREATE TABLE `lee` (`id` int(10) NOT NULL AUTO_INCREMENT, `name` char(20) DEFAULT NULL, `birthday` d ...

  6. 【解析 . PPT版】干货：阿里全息大数据构建与应用（包括：互联网金融、互联网+、精准营销...）

    作者:毛波,阿里巴巴资深数据专家,阿里数据管理平台(DMP)产品负责人. 摘要: 回顾传统数据仓库.商业智能到大型分布式数据平台的进化历程,深入阐述阿里的数据发展历史和数据观,以阿里DMP平台为例深入 ...

  7. Only top uni produces good ppt.

    重要的事说三遍: 学技术,我只相信那几所top高校 学技术,我只相信那几所top高校 学技术,我只相信那几所top高校 <Good Habits you must own> Wake up ...

  8. eclispe使用外部tomcat总结

    1. 配置tomcat Servers-->new 配置tomcat的路径,即可 2. 增加/移除application 注意:移除application时请使用"clean" ...

  9. ASP.NETC#通用扩展函数之TypeParse 类型转换方便多了

    用法: var int1 = "2".TryToInt();//转换为int失败返回0 var int2 = "2x".TryToInt(); var int3 ...

  10. LeetCode - 30. Substring with Concatenation of All Words

    30. Substring with Concatenation of All Words Problem's Link --------------------------------------- ...