代码实例：

<!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. 如何Docker化任意一个应用

    网上有很多关于如何将应用Docker化的教程,为什么我还要再写一个呢? 我见过的大部分教程都是限定在某种特定技术(例如Java或者Python),可能无法满足读者的需求.同时,这些教程也没有说清楚关于 ...

  2. 【Java】Java中charAt()方法的使用

    说明 java.lang.String.charAt() 方法返回指定索引处的char值.索引范围是从0到length() - 1.对于数组索引,序列的第一个char值是在索引为0,索引1,依此类推 ...

  3. 20180805-Java DataInputStream类

    DataInputStream dis = DataInputStream(InputStream in); 下面的例子演示了DataInputStream和DataOutputStream的使用,该 ...

  4. Factors and Multiples

    Factors and Multiples   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Y ...

  5. HDU4035 Maze (概率DP)

    转:https://www.cnblogs.com/kuangbin/archive/2012/10/03/2711108.html 题意: 有n个房间,由n-1条隧道连通起来,实际上就形成了一棵树, ...

  6. nas请求响应示意图

    curl nginx(proxy_connect) nginx(NAS) | | | | | | (1) |-- CONNECT 443 -> | | | | | | |---- [ TCP c ...

  7. 使用 GitLab 的 OAuth2 认证服务

    原文地址 本文档讲述如何使用 GitLab 作为 OAuth 认证服务提供商,以通过 GitLab 的 OAuth 认证登录其他服务(例如持续集成工具 Drone). 如果想使用其他 OAuth 身份 ...

  8. 手机端 ios 浏览器访问报错

    原因: ios 隐私模式下 会限制 localstorage 和 sessionstorage 的使用 测试的时候最好看下当前浏览器所处的模式.代码里也要判断 当前是否隐私模式 .告知用户切换模式才能 ...

  9. python实现读取配置文件

    实现代码如下: # 读取配置文件,取其值组成列表class ReadTxt: def read_txt(self,path): li_info = [] with open(path) as f: l ...

  10. jQuery基础--基本概念

    为什么要学习jQuery? [01-让div显示与设置内容.html] 使用javascript开发过程中,有许多的缺点: 1. 查找元素的方法太少,麻烦. 2. 遍历伪数组很麻烦,通常要嵌套一大堆的 ...