代码实例:

<!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. redis学习 --List

    1:添加   lpush    rpush     如果没有key的话,会报错.   lpushx    rpushx    如果没有key的话,不做任何反应. 2:得到 lpop   rpop   ...

  2. [CSP-S模拟测试]:Game(模拟)

    题目传送门(内部题62) 输入格式 第一行两个整数$n,K$表示序列长度和游戏数 第二行$n$个数为序列$a_i$ 第三行$K$个数,为$p_i$ 输出格式 输出有$K$行,第$i$行为第$i$次游戏 ...

  3. 去掉xcode中警告的一些经验

    1.编译时,编译警告忽略掉某些文件 只需在在文件的Compiler Flags 中加入 -w 参数,例如: 2.编译时,编译警告忽略掉某段代码 #pragma clang diagnostic pus ...

  4. python的final class

    https://zhuanlan.zhihu.com/p/31674972 https://rainmanwy.github.io/Python的final-Class/

  5. statistics——数学统计函数

    statistics——数学统计函数 转自:https://blog.csdn.net/zhtysw/article/details/80005410 资源代码位置:Lib/statistixs.py ...

  6. JS-递归获取当前节点全部指定类型的子节点

    在线预览 方法 使用 nodeType 判断类型,在 allChildNodes 方法内建立递归函数将 allCN 封装在方法内. <!DOCTYPE html> <html lan ...

  7. Java常用工具——java字符串

    一.String常用字符串 package com.imooc.string; public class StringDemo { public static void main(String[] a ...

  8. openpyxl模块简单入门

    一.openpyxl简介和安装 python 读写 excel 有好多选择,但是,方便操作的库不多,在我尝试了几个库之后,我觉得两个比较方便的库分别是 xlrd/xlwt.openpyxl. 之所以推 ...

  9. day02-Javascript之document.write()方法

    转行学开发,代码100天.——2018-03-18 document.write()方法作为Javascript的常用输出方式,可输出字符串,标签元素,变量等. document.write(&quo ...

  10. 机器学习实战笔记-2-kNN近邻算法

    # k-近邻算法(kNN) 本质是(提取样本集中特征最相似数据(最近邻)的k个分类标签). K-近邻算法的优缺点 例 优点:精度高,对异常值不敏感,无数据输入假定: 缺点:计算复杂度高,空间复杂度高: ...