代码实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script>

        function draw() {

            var canvas = document.getElementById('canvas');

            if (canvas.getContext){

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

                ctx.fillStyle='#FD0';

                ctx.fillRect(0,0,75,75);

                ctx.fillStyle='#6C0';

                ctx.fillRect(75,0,75,75);

                ctx.fillStyle='#09F';

                ctx.fillRect(0,75,75,75);

                ctx.fillStyle = '#F30';

                ctx.fillRect(75,75,75,75);

                ctx.fillStyle = '#FFF';

                ctx.globalAlpha=0.2;

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

                    ctx.beginPath();

                    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);

                    ctx.fill();

                }

            }

        }

    </script>

</head>

<body  onload=" draw() ;">

<canvas  id="canvas"  width="400"   height="400"></canvas>

</body>

</html>

　　效果：

2017-09-09  12:37:29

globalAlpha 示例的更多相关文章

  1. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  2. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

  3. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置（服务端+iOS端）

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

  4. .NET跨平台之旅：将示例站点升级至 ASP.NET Core 1.1

    微软今天在 Connect(); // 2016 上发布了 .NET Core 1.1 ,ASP.NET Core 1.1 以及 Entity Framework Core 1.1.紧跟这次发布,我们 ...

  5. 通过Jexus 部署 dotnetcore版本MusicStore 示例程序

    ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...

  6. WCF学习之旅—第三个示例之四（三十）

           上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)   ...

  7. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. XAMARIN ANDROID 二维码扫描示例

    现在二维码的应用越来越普及,二维码扫描也成为手机应用程序的必备功能了.本文将基于 Xamarin.Android 平台使用 ZXing.Net.Mobile  做一个简单的 Android 条码扫描示 ...

  9. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

随机推荐

  1. OC + RAC (三) 信号中的信号

    -(void)_test3{ RACSubject *signalofsignal = [RACSubject subject]; //信号中的信号(也就是发送的数据是信号) RACSubject * ...

  2. Android签名机制之---签名验证过程详解

    一.前言 今天是元旦,也是Single Dog的嚎叫之日,只能写博客来祛除寂寞了,今天我们继续来看一下Android中的签名机制的姊妹篇:Android中是如何验证一个Apk的签名.在前一篇文章中我们 ...

  3. 字符串（二）：string

    字符串使用方法整理 系列: 字符串(一):char 数组 字符串(二):string string 是 C++ STL 的一个字符串类型,原型是 vector<char> 并对字符串处理做 ...

  4. 高级Javascript代码

    Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的,补充送那啥邀请码. 本文秉承着:你看不懂是你SB,我写的代码就要牛逼. 1.单行写一个评级组件 &q ...

  5. pycharm默认的模板修改python script

    #!/usr/bin/env python # encoding: utf-8 #set( $SITE = "https://www.cnblogs.com/c-x-a" ) &q ...

  6. HDU4336 Card Collector (概率dp+状压dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意:有n种卡片,一个包里会包含至多一张卡片,第i种卡片在某个包中出现的次数为pi,问将所有种类的卡片集齐 ...

  7. 牛客提高D2t2 幸运数字考试

    分析 预处理出所有合法数字 然后直接lower_bound查询即可 代码 #include<iostream> #include<cstdio> #include<cst ...

  8. 线段树2（P3373）

    传送 感谢洛谷题解让我理清了这一撮标记 这里多了一个乘法操作,乘法的优先级高于加法.我们来思考一下有关标记的问题. 首先由两种操作,可以想到要有两个标记,一个标记乘法(mul[k]),一个标记加法(a ...

  9. 清北学堂Day 6之STL

    电脑突然一炸,什么都没有保存,凉了.(又出现了笔记凉凉事件嘤嘤嘤) 行吧慢慢回忆 就算我们会手写,我们也要学STL.吸了O2的STL可是要上天的. 数据结构 pair 使用方式: pair<类型 ...

  10. (\w+)\s*, \s*(\w+)

    \s表示空格 \w表示任何字符,字母数字下划线 _就表示下划线