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. ...
随机推荐
- （转）typedef和define的详细区别
来源:http://developer.51cto.com/art/201104/256060.htm typedef是一种在计算机编程语言中用来声明自定义数据类型,配合各种原有数据类型来达到简化编程 ...
- GIT与VCS
GIT 是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. [Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...
- 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 no-loop
转载至:https://blog.csdn.net/wo541075754/article/details/75201934 no-loop 定义当前的规则是否不允许多次循环执行,默认是 false, ...
- linux和mac使用virtualenv使用和安装
virtualenv是python的三大神器之一,用于创建独立的python虚拟环境,多个python版本相互独立,互不影响,可以在一台电 脑上同时安装多个版本的python,而且不影响本机pytho ...
- enjoy dollar vs cash dollar
當 enJoy 卡 客 戶 憑 enJoy 卡 於 enJoy 卡 「 特 約 商 戶 」 簽 賬 消 費 , 累 積 之 enJoy Dollars 及 Cash Dollars 可 在 同 一 交 ...
- vue项目实现按需加载的3种方式：vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- TopCoder客户端安装
参考:https://blog.csdn.net/github_39353095/article/details/76165940 首先,下载 Java 环境. https://www.java.co ...
- POJ1191棋盘分割
题目:http://poj.org/problem?id=1191 1.分析式子!!! 发现xba是定值,σ的大小仅和∑ xi^2 有关.故dp条件是平方和最小. 2.分出一块就像割掉一条,只需枚举从 ...
- ncnn编译安装-20190415
ncnn编译安装 1.git clone https://github.com/Tencent/ncnn 2.按照wiki说明来编译,根据需要,选择不同的编译方式.在ncnn/CMakeLists.t ...
- bzoj 4961: 除除除
Description 我们定义一种操作是将一个正整数n(n>1)用某个整数d替换,这个数必须是n的约数(1≤d≤n).给你一个正整数n, 你需要确定操作进行的期望次数,如果我们希望不断地使用这 ...