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. ...
随机推荐
- Almost Union-Find 并查集（脱离原来的树）
h: 0px; "> I hope you know the beautiful Union-Find structure. In this problem, you’re to im ...
- hdu1255 覆盖的面积 线段树-扫描线
矩形面积并 线段树-扫描线裸题 #include<stdio.h> #include<string.h> #include<algorithm> #include& ...
- laravel记住登录、设置时间
laravel 自动登陆的时间改如何实现? 控制器 public function login(){ $email =Input::get('email');$password = Input::g ...
- bzoj 3528 [ZJOI2014] 星系调查 题解
[原题] 星系调查 [问题描写叙述] 银河历59451年.在银河系有许很多多已被人类殖民的星系.如果想要在行 星系间往来,大家一般使用连接两个行星系的跳跃星门. 一个跳跃星门能够把 物质在它所连接的 ...
- [CLPR] 定位算法探幽 - 边缘和形态学
一. 引言 如何从一副图片中找到车牌? 这是机器视觉的一个应用. 理所当然地, 思考的角度是从车牌本身的信息入手, 为了讨论方便, 下面均以长窄型蓝白车牌为例. 下图就是这样一张车牌的基本信息. 一眼 ...
- 【转】第六章、Linux 的文件权限与目录配置
原文网址:http://vbird.dic.ksu.edu.tw/linux_basic/0210filepermission.php 最近更新日期:2009/08/18 Linux最优秀的地方之一, ...
- PHP中的11个魔术方法总结：__construct,、__destruct、__call等
PHP中的魔术方法总结 :__construct, __destruct , __call, __callStatic,__get, __set, __isset, __unset , __sleep ...
- POJ3013 Big Christmas Tree
题目:http://poj.org/problem?id=3013 求每个点到1的最短路.不是最小生成树. 总是WA.看讨论里说INF至少2e10,于是真的A了! 算一下,dis最大可能3276800 ...
- Jsoncpp 使用方法大全
Json(JavaScript Object Notation )是一种轻量级的数据交换格式.简而言之,Json组织形式就和python中的字典, C/C++中的map一样,是通过key-value对 ...
- bzoj3668 起床困难综合症
Description 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过研究相关文献,他找 ...