参考：

http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>globalCompositeOperation</title>

</head>

<body>

    <div>

        <div>先画矩形后画圆;source指将要绘制的;destination指已经存在的;</div>

        <select name="slt" id="sltId" onchange="showGCO()">

            <option value="copy">copy-只画新图</option>

            <option value="darker">darker-颜色相减</option>

            <option value="destination-atop">destination-atop-</option>

            <option value="destination-in">destination-in</option>

            <option value="destination-out">destination-out</option>

            <option value="destination-over">destination-over</option>

            <option value="lighter">lighter-颜色相加</option>

            <option value="source-atop">source-atop</option>

            <option value="source-in">source-in</option>

            <option value="source-out">source-out</option>

            <option value="source-over">source-over</option>

            <option value="xor">xor</option>

        </select>

    </div>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    function showGCO() {

        var slt = document.getElementById('sltId');

        // alert(slt.value);

        var c = document.getElementById('myCanvas');

        var ctx = c.getContext('2d');

        ctx.fillStyle = '#00ff00';

        ctx.fillRect(10, 10, 50, 50);

        ctx.globalCompositeOperation = slt.value;

        ctx.beginPath();

        ctx.fillStyle = '#ff0000';

        ctx.arc(50, 50, 30, 0, 2 * Math.PI);

        ctx.fill();

    }

    </script>

</body>

</html>

Canvas globalCompositeOperation API的更多相关文章

  1. HTML5之canvas基本API介绍及应用 1

    一.canvas的API: 1.颜色.样式和阴影: 2.线条样式属性和方法: 3.路径方法: 4.转换方法: 5.文本属性和方法: 6.像素操作方法和属性: 7.其他: drawImage:向画布上绘 ...

  2. javascript canvas全部API

    HTMLCanvasElement//canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可绘制的上下文 t ...

  3. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  4. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  5. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  6. 引言：Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  7. Canvas createRadialGradient API

    Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...

  8. Canvas原生API(纯CPU)计算并渲染三维图

    Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...

  9. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

随机推荐

  1. json python api

    摘要:对于python来说,json并不是一种数据类型,可以把它视为函数.json.dumps把字典或列表变成json风格的str类型:json.loads把json风格的str类型变成原来的类型(列 ...

  2. PAT (Advanced Level) 1028. List Sorting (25)

    时间卡的比较死,用string会超时. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  3. [转] spring事务管理几种方式

    前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...

  4. JAV基础语法之---数据类型转换

    数制转换": 1.string 转 byte[] String str = "Hello";byte[] srtbyte = str.getBytes(); 2.byte ...

  5. frame间跳转及相关问题

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. (简单) POJ 3087 Shuffle'm Up，枚举。

    Description A common pastime for poker players at a poker table is to shuffle stacks of chips. Shuff ...

  7. Online Schema Change for MySQL

    It is great to be able to build small utilities on top of an excellent RDBMS. Thank you MySQL. This ...

  8. easyui-01 怎么样使用easyui

    console.info();在控制台打印. 1.引入 <script type="text/javascript" src="../../jquery-easyu ...

  9. JUCE_FIFO实现分析

    JUCE_FIFO代码简单剖析,此处的剖析就是给自己留一个方便查询的内容:不做太多内容的要求,只做简单的记录:本文以初学者的角度来些,大牛请飘过O(∩_∩)O FIFO的功能在博客的其他帖子里面已经有 ...

  10. 前段验证框架 formValidator

    http://blog.csdn.net/lorinzhang/article/details/7283557