HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
#canvas{
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
<button>source-over</button>
<button>source-atop</button>
<button>source-in</button>
<button>source-out</button>
<button>destination-over</button>
<button>destination-atop</button>
<button>destination-in</button>
<button>destination-out</button>
<button>lighter</button>
<button>copy</button>
<button>xor</button>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* globalCompositeOperation: 图形的折叠方式
*/
$('button').click(function(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
cxt.globalCompositeOperation = $(this).html();
cxt.fillStyle = 'red';
cxt.fillRect(100, 100, 400, 200);
cxt.fillStyle = 'blue';
cxt.fillRect(300, 200, 400, 200);
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* globalAlpha: 透明度
*/
for(var i = 0; i < 100; i++){
var R = Math.floor(Math.random()*225);
var G = Math.floor(Math.random()*225);
var B = Math.floor(Math.random()*225);
var x = R + "," + G + "," + B;
cxt.fillStyle = "rgb("+x+")";
cxt.globalAlpha = 0.7;
cxt.beginPath();
cxt.arc(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*70, 0, Math.PI*2);
cxt.fill();
}
</script>
HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation的更多相关文章
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
随机推荐
- 【问题】C4D中设置了界面颜色，如何恢复默认？
由于C4D没有恢复默认设置的选项,恢复默认的时候比较麻烦,这里简单删除一下配置文件就好了. 1.打开C4D设置,点击下面的[打开配置文件夹],并关掉C4D. (即C:\Users\你的用户名\AppD ...
- 虚拟机CentOS的NAT模式联网和SecureCRT远程登录管理工具
Cenos7 发生了很大的变化,不过也是直接配置网络,从启网卡,从启机器,crt链接 https://blog.csdn.net/gebitan505/article/details/54584213 ...
- .NET基金会成立
作者 Jonathan Allen ,译者 臧秀涛 发布于 2014年4月8日 随着.NET基金会的成立,微软在成为主要的开源参与者的道路上又前进了一步.该基金会的宗旨是“成为越来越多的开源.NET项 ...
- WinForm 窗体间参数传递
http://www.cnblogs.com/xinjian/archive/2011/09/15/2177851.html 本人刚刚接触Winform ,学习之后分享下心得. winform 窗体与 ...
- thinkphp3.2用户登录ajax提交验证
html代码 <if condition="!isset($_SESSION['account'])"> <div class="load lf&quo ...
- bzoj 1767: [Ceoi2009]harbingers
Description 给定一颗树,树中每个结点有一个邮递员,每个邮递员要沿着唯一的路径走向capital(1号结点),每到一个城市他可以有两种选择: 1.继续走到下个城市 2.让这个城市的邮递员替他 ...
- 以后可能会遇到的问题记录 .send_keys 无法输入的情况
1.send_keys(输入不了字符)也出现这种问题,后来用set_value 可以了 send_keys():调用当前系统输入法键盘,进行输入时可能无法到达自己想 要的结果 set_text() ...
- 杂项-TOOL：NPIO
ylbtech-杂项-TOOL:NPIO NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作.NPOI是一个开源的Ja ...
- 除了用作缓存数据，Redis还可以做这些
Redis应该说是目前最受欢迎的NoSQL数据库之一了.Redis通常被作为缓存组件,用作缓存数据.不过,除了可以缓存数据,其实Redis可以做的事还有很多.下面列举几例,供大家参考. 1.最新列表 ...
- Jquery判断IE6等浏览器的代码
这好像是由几篇代码接在一起的,原文均来自网络,不记得出处了~ jquery中利用navigator.userAgent.indexOf来判断浏览器类型,并进行了一下处理,如果不想使用jquery,稍为 ...