代码实例：

<!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. Primary Key Increase by Trigger

    Oracle Create Table: CREATE TABLE TAB( ID NUMBER(10) NOT NULL PRIMARY KEY, NAME VARCHAR(19) NOT NULL ...

  2. iconfont的三种使用方式

    这篇文章主要介绍了iconfont的三种使用方式,需要的朋友可以参考下   在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我 ...

  3. 关于KindEditor编辑器，word文档中的图文全选粘贴，在编辑器中不显示图片的问题

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  4. Linux Crontab命令定时任务基本语法

    一.Crontab查看编辑重启 1.查看crontab定时执行任务列表 crontab -l 2.编辑crontab定时执行任务 crontab -e 3.删除crontab定时任务 crontab  ...

  5. Anaconda概念和使用方法

    Anaconda概述 Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能,可以很方便地解决多版本python并存.切 ...

  6. linux vim设置和 快捷命令配置

    1.vim配置 set tabstop= set shiftwidth= set softtabstop= set fileencodings=utf-,ucs-bom,gb2312,gbk,gb18 ...

  7. [CSP-S模拟测试]:天才绅士少女助手克里斯蒂娜（数学+树状数组）

    题目描述 红莉栖想要弄清楚楼下天王寺大叔的显像管电视对“电话微波炉(暂定)”的影响. 选取显像管的任意一个平面,一开始平面内有个$n$电子,初始速度分别为$v_i$,定义飘升系数为$$\sum \li ...

  8. centos7中yum安装lamp环境

    一.准备工作 1.1 环境 操作系统:centos7(CentOS-7-x86_64-Minimal-1708) 硬件:(这个根据项目运行和配置建议设置,一般我先配个1核1G) 1.2 关闭selin ...

  9. （转）深入详解Java线程池——Executor框架

    转:https://yq.aliyun.com/articles/633782?utm_content=m_1000015330 在Java中,使用线程来异步执行任务.Java线程的创建与销毁需要一定 ...

  10. Tomcat GC参数详解

    tomcat启动参数,将JVM GC信息写入tomcat_gc.log CATALINA_OPTS='-Xms512m -Xmx4096m -XX:PermSize=64M -XX:MaxNewSiz ...