代码实例：

<!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. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  2. spring boot中注册拦截器

    拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提取action中可重 ...

  3. science_action

    w import random import pprint import math import matplotlib.pyplot as plt def gen_random(magnify_=10 ...

  4. Repository模式--采用EF Fluent API使用EntityTypeConfiguration分文件配置Model映射关系

    EF中类EntityTypeConfiguration是一个很有用的类,在nopCommerence中就使用这个类来分文件分文件配置Model映射关系.今天我就来谈谈Repository模式在Enti ...

  5. ECMAScript 2015 可迭代协议：迭代普通对象

    可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of结构中什么值可以被循环(得到). 一些内置类型都是内置的可迭代类型并且有默认的迭代行为( 比如 ...

  6. TensorFlow学习笔记1-入门

    TensorFlow学习笔记1-入门 作者: YunYuan *** 写在前面 本笔记是我学习TensorFlow官方文档中文版的读书笔记,由于尚未搭建好Github的个人博客的评论功能,故尚不方便与 ...

  7. fatal error C1047: The object or library file xxx was created with an older compiler than other objects

    之前编译Cocos2DX时遇到过一次,这次又遇到了,记下解决方法,以防再来第三次. 这个错误是说链接的库或者文件是老版本编译器生成的,与当前编译器不符,比如这次用的预编译库是2015的,而我当前使用的 ...

  8. 关于eclipse中的maven插件问题

    最近上课讲eclipse 中的maven插件 有一个坑确实比较坑,实际上就是一个配置的原因. 就是在eclipse中设置java 的buildpath的时候,一般不注意往往都设置成了jre的,这样的话 ...

  9. ECharts 知识笔记

    涓滴之水终可磨损大石,不是由于它的力量强大,而是由于昼夜不舍的滴坠 定制label样式(图标上显示的对应文字 对文字一些样式的修改) (1)通过“formatter”实现内容自定义: (2)通过“ri ...

  10. vim插件管理器：Vundle的介绍及安装（很全）（转载）

    转载自:https://blog.csdn.net/zhangpower1993/article/details/52184581 背景 Vim缺乏默认的插件管理器,所有插件的文件都散布在~/.vim ...