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. ...
随机推荐
- jquery学习1之对juery对象的细节操作1
jquery是前台动态页面开发的一个很重要的工具. 一:jquery对象中length属性和size()方法 var a=$("a").length; var b= ...
- LG1600 天天爱跑步
题意 分析 对一个(s,t)查询,令f=lca(s,t),则操作可化为(s,f),(f,t). 考虑观察到的情况,若x在s到t的路径上,且x观察到,则 \[ \textrm{dep}_s-\textr ...
- 使用webpack搭建vue项目中遇到的问题
1:data数据文件经试验,需要放在生成的build文件夹中才能生效,但是应该把data文件夹先放在src中,然后如何定义config文件,让其复制过去? new CopyWebpackPlugin( ...
- solr相关
http://www.cnblogs.com/arli/ 博主介绍: 武汉理工大学计算机系 华为java工程师 华为企业版Hadoop工程师 华为大数据解决方案架构师 国盛天丰软件工程师
- dbt 包管理
dbt 可以方便的支持基于git 的包管理 依赖申明 位置 dbt_project.yml 中的repositories 或者使用packages.yaml 格式 dbt_project.yml: r ...
- Jmeter参数跨线程组传递
1.利用BeanShell, 请求==>后置==>beanshellpostprocessorScripts内写:props.put("user_name"," ...
- 【转】每天一个linux命令（38）：cal 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/14/2817473.html cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又 ...
- 【unittest】unittest单元模块做assert
我在Windows上开发Python用的版本是2.7,在Ubuntu上开发的版本是2.6,而在Python的unittest模块中,有几个方法是在2.7才有的,它们是: Method Checks t ...
- java编码-多重（乱码）
一.1,UTF编码 - 2,ISO解码 - 3,UTF编码 - 4,ISO解码 String ISO = "ISO-8859-1"; String UTF = "UTF- ...
- PHP错误和异常处理
1.错误报告级别: 错误E_ERROR; 警告 E_WARNING 注意 E_NOTICE 2.php.ini 中的配置 error_reporting=; 错误提示 一般设置为: error_re ...