<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

            display: block;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

    <button>source-over</button>

    <button>source-atop</button>

    <button>source-in</button>

    <button>source-out</button>

    <button>destination-over</button>

    <button>destination-atop</button>

    <button>destination-in</button>

    <button>destination-out</button>

    <button>lighter</button>

    <button>copy</button>

    <button>xor</button>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * globalCompositeOperation: 图形的折叠方式

     */

    $('button').click(function(){

        cxt.clearRect(0, 0, canvas.width, canvas.height);

        cxt.globalCompositeOperation = $(this).html();

        cxt.fillStyle = 'red';

        cxt.fillRect(100, 100, 400, 200);

        cxt.fillStyle = 'blue';

        cxt.fillRect(300, 200, 400, 200);

    });

</script>
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * globalAlpha: 透明度

     */

    for(var i = 0; i < 100; i++){

        var R = Math.floor(Math.random()*225);

        var G = Math.floor(Math.random()*225);

        var B = Math.floor(Math.random()*225);

        var x = R + "," + G + "," + B;

        cxt.fillStyle = "rgb("+x+")";

        cxt.globalAlpha = 0.7;

        cxt.beginPath();

        cxt.arc(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*70, 0, Math.PI*2);

        cxt.fill();

    }

</script>

HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation的更多相关文章

  1. HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 使用 HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  6. HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  7. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

随机推荐

  1. python 判断字符串中字符类型的常用方法

    s为字符串 s.isalnum() 所有字符都是数字或者字母 s.isalpha() 所有字符都是字母 s.isdigit() 所有字符都是数字 s.islower() 所有字符都是小写 s.isup ...

  2. 剑指offer-顺时针打印矩阵-二维数组

    输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1     2  3    4 5     6  7    8 9   10 11 12 13 14 15 16 ...

  3. loopback v4 特性

    loopback 是一个api 服务框架,挺方便的,同时也已经演进了好几代了v4 有一些新功能的 支持 新特性 基于typescript/es2017 开发 openapi 驱动的rest api 开 ...

  4. npm bower gulp

    npm即nodejs package manager ,是nodeJs的包管理工具,使用前需安装nodeJs(https://www.npmjs.com.cn/getting-started/inst ...

  5. 常用C库函数功能及用法

    二.字符函数 调用字符函数时,要求在源文件中包下以下命令行: #include <ctype.h> 函数原型说明 功能 返回值 int isalnum(int ch) 检查ch是否为字母或 ...

  6. oracle单表选择率（selectivity）——计算执行计划的基数

    CBO优化器是基于对当前经过特定测试的数据集中预期的行比率估计来计算基数的.此处的行数之比是一个数值,称为选择率(selectivity).得到选择率之后,将其与输入行数进行简单相乘既可得到基数. 在 ...

  7. C#如何使用VS2010与SQL2008建立链接及初步调用（转）

    关于VS2010与SQL2008建立链接及初步调用问题,网上参考的资料很多,我写这个博客,并非是做重复工作,也不是做搬运工.本文将以一种初学者的角度,去完成从数据库建立,到VS2010与SQL中的数据 ...

  8. SQLServer2008开启远程连接

    1.查看sqlserver brower协议是否启动 2.对象资源管理器 右键属性->选择-> 方面->服务器配置->Remoteaccess ->True 3.对象资源 ...

  9. BASIC-26_蓝桥杯_报时助手

    示例代码: #include <stdio.h> void print(int x) { switch(x) { : printf("zero ");break; : ...

  10. bzoj1876 SuperGCD

    Description Sheng bill有着惊人的心算能力,甚至能用大脑计算出两个巨大的数的GCD(最大公约 数)!因此他经常和别人比赛计算GCD.有一天Sheng bill很嚣张地找到了你,并要 ...