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. ...
随机推荐
- 《DSP using MATLAB》Problem 4.23
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- leetcode:Reverse Words in a String【Python版】
class Solution: # @param s, a string # @return a string def reverseWords(self, s): ss = s.split(&quo ...
- stenciljs 学习四 组件装饰器
stenciljs 可以方便的构建交互式组件 支持以下装饰器 component prop watch state method element component 说明 component 包含ta ...
- IEPNGFix 解决IE6支持PNG透明问题
IE6本身是支持索引色透明度(PNG8)格式,但不支持真彩色透明度(PNG24)格式. 使用IE PNG Fix 2.0可以完美解决IE6支持PNG透明问题,而且支持背景定位和重复属性. IE PNG ...
- CentOS 7防火墙开放端口快速方法
这篇文章主要为大家详细介绍了Centos7.1防火墙开放端口的快速方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 例如安装Nagios后,要开放5666端口与服务器连接,命令如下: [ro ...
- linux 命令 随笔
1 查找命令 which (寻找执行档) :这个指令是根据PATH这个环境变量所规范的路径,去搜寻执行档的档名,所以,重点是找出执行档而已,which 后面接的是完整档名,也就说执行文件 wherei ...
- HBase的BlockCache
BlockCache 首先要明白Block,在HBase里面存储的最小单元:在memstore向硬盘刷的时候,如果目标block的大小+size之后大于MAX_SIZE,将会新创建一个block来存储 ...
- Servlet是单例的吗？
如题,是吗?首先我们得搞清楚啥是单例.一聊起单例,条件反射的第一个想到的自然是单例模式.单例模式的定义:一个类有且仅有一个实例,并且自行实例化向整个系统提供.如果按照Java中单例的定义,那么当Ser ...
- 【python】if&&for&&while语句
if语法: 类型一: if expression : if_suit else: else_suit 例如: adic={"name":"paulwinflo" ...
- Windows OS系统变量
%userprofile% C:\Users\Administrator\ %windir% C:\Windows\