代码实例：

<!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. 请问有支持直接从 word 文档复制图片的 editor 吗

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  2. [luogu]P1169 [ZJOI2007]棋盘制作[DP][单调栈]

    [luogu]P1169 [ZJOI]棋盘制作 ——!x^n+y^n=z^n 题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋 ...

  3. PHPExcel 横向循环输出

    在PHPExcel中,我用到了一个循环,代码如下 for($i=4;$i<$num;$i++) { if($i>30) { $j="A".chr($i+34).&quo ...

  4. 20180805-Java 异常处理

    try{ //程序代码}catch(ExceptionName e1){ //Catch 块} 下面的例子中声明有两个元素的一个数组,当代码试图访问数组的第三个元素的时候就会抛出一个异常. //文件名 ...

  5. 学习日记7、mvc +easyui datagrid excel上传

    1.首先获取datagrid所有行的数据 var rows = $("#List").datagrid("getRows"); 2.进行数据转换转化成JSON格 ...

  6. docker 部署 tomcat

    1.搜索tomcat信息 docker search tomcat 2.下拉tomcat 镜像 docker pull tomcat 3.运行tomcat docker run -d --name=t ...

  7. 用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 第一阶段结语 打 Tag 前文列表 用 Flask 来写个轻博客 (1 ...

  8. log4j配置及异常、解决办法

    配置: ### set log levels ### D只有一个E也只有一个 log4j.rootLogger = debug,stdout,D,E ### 输出到控制台 ### log4j.appe ...

  9. 阅读笔记05-架构师必备最全SQL优化方案（1）

    一.优化的哲学 1.优化可能带来的问题? 优化不总是对一个单纯的环境进行,还很可能是一个复杂的已投产的系统: 优化手段本来就有很大的风险,只不过你没能力意识到和预见到: 任何的技术可以解决一个问题,但 ...

  10. poj3126Prime Path （BFS+素数筛）

    素数筛:需要一个数组进行标记 最小的素数2,所有是2的倍数的数都是合数,对合数进行标记,然后找大于2的第一个非标记的数(肯定是素数),将其倍数进行标记,如此反复,若是找n以内的所有素数,只需要对[2, ...