参考：

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. 什么是j2ee ？？EJB与j2ee的关系？？ 请看百度百科

    首先,EJB是j2ee的一部分. http://baike.baidu.com/link?url=SGmNOVWoaZ62WCjb7a_yzz-GBGsDT3jyFM1hsvv8ycAwusdmo_D ...

  2. windows 下nginx 虚拟主机搭建

    需要在 nginx.conf里面引入刚才配置的那个文件   第一步 加东西 http的节点里面加上 一定要注意的是:必须以  ;  结尾 include D:/phpen/nginx-1.3.6/co ...

  3. [Unity Quaternion]四元数Quaternion的计算方式

    什么是Quaternion四元数 1843年,William Rowan Hamilton发明了四元数,但直到1985年才有一个叫Ken Shoemake的人将四元数引入计算机图形学处理领域.四元数在 ...

  4. Spring自学教程-介绍、特点、框架(一)

    一.spring是什么,有什么用? 一句话:面向企业应用,使用javabean代替ejb的java应用或web开发. 侵入式的做法就是要求用户代码"知道"框架的代码,表现为用户代码 ...

  5. 鸽笼原理的运用HDU1205

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 题目解析:开始没看清题,WA了一发,以为只要最大的次大的差2就是NO,后来仔细看过之后才发现,, ...

  6. android gridview画分割线

    dongyangzhang android gridview画分割线,如图: 1.先上图: 2.具体实现代码: public class LineGridView extends GridView { ...

  7. NSURLRequest POST方式请求服务器示例

    http://lizhuang.iteye.com/blog/1833297 1.  准备阶段 NSString *urlString = [NSString stringWithFormat:@&q ...

  8. springmvc的jdbcTemplate 插入 返回主键

    public int insertCustomer(final Customer customer) {        //TODO.        final String sql = " ...

  9. 最新 Spring 4.2.2 集成 Quartz Scheduler 2.2.2 任务调度示例

    参考http://blog.csdn.net/defonds/article/details/49496895 本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度. ...

  10. C语言－表达式

    表达式是使用运算符连接起来的式子,C语言中的表达式有以下几种: 1.算数运算符 + - * / % 2.赋值运算符 +=  -=  *=  /=  %= 3.自增.自减 ++   --   a++为先 ...