HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop
<!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'); /**
* 线性渐变 createLinearGradient
* 添加颜色 addColorStop( 该颜色起始位置的百分比, 颜色 )
*/
var lineStyle = cxt.createLinearGradient(0, 0, 1000, 600); //确定线性渐变的位置
lineStyle.addColorStop(0.0, 'red'); //渐变样式的添加
lineStyle.addColorStop(0.5, 'yellow'); //渐变样式的添加
lineStyle.addColorStop(1.0, 'blue'); //渐变样式的添加
cxt.fillStyle = lineStyle;
cxt.fillRect(0, 0, 1000, 600);
</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'); /**
* 绘制一片星空
*/
var skyStyle = cxt.createLinearGradient(0, 0, 0, canvas.height);
skyStyle.addColorStop(0.0, 'black');
skyStyle.addColorStop(1.0, '#035');
cxt.fillStyle = skyStyle; cxt.fillRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < 150; i++){
var fiveStart = {};
fiveStart.Radius = Math.random()*6+6;
fiveStart.offsetX = Math.random()*canvas.width;
fiveStart.offsetY = Math.random()*canvas.height*0.65;
fiveStart.RotationAngle = Math.random()*360; drawFiveStar(cxt, fiveStart);
} /**
* 控制五角星的方法
*/
function drawFiveStar(cxt, fiveStart){
cxt.save();
cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相对于原点的偏移量
cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //图形旋转(弧度)
cxt.scale(fiveStart.Radius, fiveStart.Radius); //图形缩放( X轴的倍数, Y轴的倍数 )
fiveStartPath(cxt);
cxt.fillStyle = "yellow";
cxt.fill();
cxt.restore();
} /**
* 绘制标准五角星路径的方法
*/
function fiveStartPath(cxt){
cxt.beginPath();
var x = 0; y = 0;
for(var i = 0; i < 5; i++){
x = Math.cos((18+72*i)/180*Math.PI);
y = Math.sin((18+72*i)/180*Math.PI);
cxt.lineTo(x, 0-y);
x = Math.cos((54+72*i)/180*Math.PI)/2.0;
y = Math.sin((54+72*i)/180*Math.PI)/2.0;
cxt.lineTo(x, 0-y);
}
cxt.closePath();
}
</script>
HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop的更多相关文章
- HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient
<!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 填充渐变形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient
今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...
- html5 canvas 径向渐变2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 径向渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 对角线渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 垂直渐变描边
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 水平渐变描边
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- MySQL Inception--安装
========================================== 安装依赖包 ## 安装依赖包 yum -y install cmake libncurses5-dev libss ...
- x86函数调用约定
以下摘自<IDA Pro>,貌似有一些细节之处没有交代清楚呢,需要进一步思考.实践. 了解栈帧的基本概念后,接下来详细介绍它们的结构.下面的例子涉及x86体系结构和与常见的x86编译器(如 ...
- 注意字符串的strlen与sizeof的差别
unsigned char AT_RESET[]="r\r\n"; printf("strlen=%d sizeof=%d\n",strlen(AT_RESET ...
- golang defer的使用
defer一般用于在函数结束时执行必要的处理工作.例如,关闭文件描述符,关闭网络连接等等. 函数中可以定义多个defer,执行的时候按照先进后出的顺序. defer定义的语句,即使遇到panic,也会 ...
- 实例直观解释sessionid的作用
有两个php页面,demo1.php与demo2.php.如果想要在demo1.php创建一个session需要在的demo2.php或者说其它页面都可以获取到设置的session的值,达到会话的功能 ...
- 专访TK教主于旸：原来那些搞安全的说的都是真的（图灵访谈）
引用:http://www.ituring.com.cn/article/196609 于旸,网名“tombkeeper”,在国内黑客界被尊称为“TK教主”,现任腾讯玄武实验室总监.于旸从事信息安全研 ...
- 10个CSS+HOVER 的创意按钮
CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击.悬停的相关特效,以便大家获得更好的创造灵感. 今天我们 ...
- java学习之路之javaSE基础1
<h2>java学习之路之javaSE基础1</h2> <div> ###01.01_计算机基础知识(计算机概述)(了解)* A:什么是计算机?计算机在生活中的应用 ...
- Hibernate对substring和cast的支持问题
http://blog.sina.com.cn/s/blog_8acd9e4b0102uwev.html Hibernate对substring和cast的支持问题 问题:要比较日期的范围...这是只 ...
- HttpClient连接池
HttpClient连接池,发现对于高并发的请求,效率提升很大.虽然知道是因为建立了长连接,导致请求效率提升,但是对于内部的原理还是不太清楚.后来在网上看到了HTTP协议的发展史,里面提到了一个属性C ...