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/ ...
随机推荐
- tarjan强联通分量（模板）
#include<cstdio> #include<cstring> #include<cstdlib> #include<iostream> #inc ...
- MySQL Disk--磁盘相关参数
/sys/block/sda/queue/nr_requests 磁盘队列长度.默认只有 128 个队列,可以提高到 512 个.会更加占用内存,但能更加多的合并读写操作,速度变慢,但能读写更加多的量 ...
- 转 AngularJS 2.0将面向移动应用并放弃旧浏览器
AngularJS团队表示“AngularJS 2.0是移动应用的框架”.该框架将继续支持桌面,但其主要关注点变成了移动领域.它的目标还包括通过转译器支持EcmaScript 6(因为浏览器还不支持E ...
- Asp.net自定义控件系列（一）
最近看到公司某个网站中用到了自定义控件,咋一眼看去,不明白什么玩意, 网上一搜,好像确实不是几句话就能写出强大的自定义控件.好吧,作为一个码农,我决定从基本学起,写一个关于自定义控件学习过程系列. 当 ...
- MapReduce-线性回归
线性回归有是三个值很重要: 1. 斜率 2. 截距:x和y轴的交点值: 3. 显著性:数据偏离线性的程度,用以判断数据可以用线性表示的程度:拟合度 apache.commons.math3里面有一 ...
- sklearn, Numpy以及Pandas
pandas里面的对于数据操作比如where,drop以及dropna等都会有一个属性:inplace,这个单词意思是原地,如果inplace=true代表数据本身要执行该操作:如果inplace=f ...
- C# ObjectArx AutoCAD二次开发(转帖)
http://www.cnblogs.com/houlinbo/p/3325898.html 1.开发基本资料准备 用Vs2010进行Autocad 2010开发,首先下载ObjectArx 2010 ...
- 1、zookeeper集群安装
前提准备3台centos7.0虚拟机 c7003:192.168.70.103 c7004:192.168.70.104 c7005:192.168.70.105 并在三台虚拟机上配置hosts为 1 ...
- pfsense的nat配置
需要把内网192.168.1.100的80端口映射到外面,外网卡地址为192.168.1.200 firewall, firewall,nat,选择port forward标签,添加一个 在desti ...
- vscode美化方法以及定制主题插件
首先是学会调整字体和字体大小 换成你看着舒服的字体和字体大小,当然,通常情况下默认的就很好看,但每个人的显示屏参数不同显示起来的效果因人而异,如果你有更好的方案不妨设置一下 下面展示我的浅色主题和深色 ...