- 浏览: 2489285 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
HTML5(四) colorful world
1. basic color
stokeStyle is for line
fillStyle is for area
statement bellows are the same color.
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
sample for 36 circles, test4.html:
<canvas id="canvas1" width="150" height="150" style=" background-color: black">
you are out!
</canvas>
<br/>
<input type="button" value="fillStyle" onclick="fillStyle();" />
<input type="button" value="strokeStyle" onclick="strokeStyle();" />
<script type="text/javascript">
function fillStyle() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//clear the canvas
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
//set color values
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
//begin paint
ctx.beginPath();
//draw circle and i,j for the center of the circle
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.fill();
}
}
}
function strokeStyle() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke()
}
}
}
</script>
2.Transparency
sample codes in file test4-1.html:
<canvas id="canvas2" width="150" height="150" style="background-position: center center;background-image:url(banner1.gif)">
you are out!
</canvas>
<br />
Transparency<br />
<input type="button" value="0" onclick="alphaTest1(0);" />
<input type="button" value="0.2" onclick="alphaTest1(0.2);" />
<input type="button" value="0.4" onclick="alphaTest1(0.4);" />
<input type="button" value="0.6" onclick="alphaTest1(0.6);" />
<input type="button" value="0.8" onclick="alphaTest1(0.8);" />
<input type="button" value="1" onclick="alphaTest1(1);" />
<script type="text/javascript">
function alphaTest1(alpah) {
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,150,150);
ctx.fillStyle="rgba(0,0,255,"+alpah+")"
ctx.fillRect(20, 20, 110, 110)
}
</script>
There is a property named globalAlpha, it is the controller of global alpha value.
my example file test4-2.html:
<canvas id="canvas3" width="150" height="150" style="background-position: center center;background-image:url(banner2.gif)">
you are out!
</canvas><br/>
globalalpha:
<input type="button" value="0" onclick="alphaTest2(0);" />
<input type="button" value="0.2" onclick="alphaTest2(0.2);" />
<input type="button" value="0.4" onclick="alphaTest2(0.4);" />
<input type="button" value="0.6" onclick="alphaTest2(0.6);" />
<input type="button" value="0.8" onclick="alphaTest2(0.8);" />
<input type="button" value="1" onclick="alphaTest2(1);" />
<script type="text/javascript">
function alphaTest2(alpah){
var canvas = document.getElementById("canvas3");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,150,150);
//set globalalpha value
ctx.globalAlpha=alpah
ctx.fillStyle="red"
ctx.fillRect(10, 10, 30, 30)
ctx.fillStyle="green"
ctx.fillRect(10, 50, 30, 30)
ctx.fillStyle="blue"
ctx.fillRect(10, 90, 30, 30)
ctx.fillStyle="yellow"
ctx.beginPath()
ctx.arc(100, 75, 40, 0, 360)
ctx.fill()
}
</script>
3.gradients
we have 2 methods to create a object named canvasGradient.
one method: createLinearGradient(x1,y1,x2,y2)
(x1,y1) begin point
(x2,y2) end point
createRadialGradient(x1,y1,r1,x2,y2,r2)
(x1,y1) r1 first circle
(x2,y2) r2 second circle
addColorStop(position,color)
position between 0.0 to 1.0
my test file test4-3.html:
<canvas id="canvas4" width="150" height="150" style=" background-color: black">
you are out!
</canvas>
<br/>
gradient:
<input type="button" value="horizontal" onclick="gradients1();" />
<input type="button" value="vertical" onclick="gradients2();" />
<input type="button" value="bias" onclick="gradients3();" />
<input type="button" value="mutation" onclick="gradients4();" />
<input type="button" value="CircleOne" onclick="gradients5();" />
<input type="button" value="CircleTwo" onclick="gradients6();" />
<script type="text/javascript">
function gradients1() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
//create line gradient object
var lingrad = ctx.createLinearGradient(0,0,150,0);
//add color
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients2() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
//create line
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.4, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients3() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createLinearGradient(0,0,150,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients4() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'white');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients5() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createRadialGradient(75,75,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
function gradients6() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createRadialGradient(5,5,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
</script>
4.shadow
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
shadowOffsetX and shadowOffsetY are the shadow distance of x and y;
shadowBlur is 0-1
my example file test4-4.html:
<canvas id="canvas5" width="150" height="150" style=" background-color: black">
you are out!
</canvas><br/>
<input type="button" value="pic shadow" onclick="shadow1();" />
<input type="button" value="txt shadow" onclick="shadow2();" />
<script type="text/javascript">
function shadow1() {
var ctx = document.getElementById('canvas5').getContext('2d');
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 130, 130);
}
function shadow2() {
var ctx = document.getElementById('canvas5').getContext('2d');
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(255, 255, 255, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "red";
ctx.fillText("Sample String", 15, 70);
}
</script>
references:
http://www.blogjava.net/myqiao/category/46360.html
1. basic color
stokeStyle is for line
fillStyle is for area
statement bellows are the same color.
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
sample for 36 circles, test4.html:
<canvas id="canvas1" width="150" height="150" style=" background-color: black">
you are out!
</canvas>
<br/>
<input type="button" value="fillStyle" onclick="fillStyle();" />
<input type="button" value="strokeStyle" onclick="strokeStyle();" />
<script type="text/javascript">
function fillStyle() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//clear the canvas
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
//set color values
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
//begin paint
ctx.beginPath();
//draw circle and i,j for the center of the circle
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.fill();
}
}
}
function strokeStyle() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,150,150);
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke()
}
}
}
</script>
2.Transparency
sample codes in file test4-1.html:
<canvas id="canvas2" width="150" height="150" style="background-position: center center;background-image:url(banner1.gif)">
you are out!
</canvas>
<br />
Transparency<br />
<input type="button" value="0" onclick="alphaTest1(0);" />
<input type="button" value="0.2" onclick="alphaTest1(0.2);" />
<input type="button" value="0.4" onclick="alphaTest1(0.4);" />
<input type="button" value="0.6" onclick="alphaTest1(0.6);" />
<input type="button" value="0.8" onclick="alphaTest1(0.8);" />
<input type="button" value="1" onclick="alphaTest1(1);" />
<script type="text/javascript">
function alphaTest1(alpah) {
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,150,150);
ctx.fillStyle="rgba(0,0,255,"+alpah+")"
ctx.fillRect(20, 20, 110, 110)
}
</script>
There is a property named globalAlpha, it is the controller of global alpha value.
my example file test4-2.html:
<canvas id="canvas3" width="150" height="150" style="background-position: center center;background-image:url(banner2.gif)">
you are out!
</canvas><br/>
globalalpha:
<input type="button" value="0" onclick="alphaTest2(0);" />
<input type="button" value="0.2" onclick="alphaTest2(0.2);" />
<input type="button" value="0.4" onclick="alphaTest2(0.4);" />
<input type="button" value="0.6" onclick="alphaTest2(0.6);" />
<input type="button" value="0.8" onclick="alphaTest2(0.8);" />
<input type="button" value="1" onclick="alphaTest2(1);" />
<script type="text/javascript">
function alphaTest2(alpah){
var canvas = document.getElementById("canvas3");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,150,150);
//set globalalpha value
ctx.globalAlpha=alpah
ctx.fillStyle="red"
ctx.fillRect(10, 10, 30, 30)
ctx.fillStyle="green"
ctx.fillRect(10, 50, 30, 30)
ctx.fillStyle="blue"
ctx.fillRect(10, 90, 30, 30)
ctx.fillStyle="yellow"
ctx.beginPath()
ctx.arc(100, 75, 40, 0, 360)
ctx.fill()
}
</script>
3.gradients
we have 2 methods to create a object named canvasGradient.
one method: createLinearGradient(x1,y1,x2,y2)
(x1,y1) begin point
(x2,y2) end point
createRadialGradient(x1,y1,r1,x2,y2,r2)
(x1,y1) r1 first circle
(x2,y2) r2 second circle
addColorStop(position,color)
position between 0.0 to 1.0
my test file test4-3.html:
<canvas id="canvas4" width="150" height="150" style=" background-color: black">
you are out!
</canvas>
<br/>
gradient:
<input type="button" value="horizontal" onclick="gradients1();" />
<input type="button" value="vertical" onclick="gradients2();" />
<input type="button" value="bias" onclick="gradients3();" />
<input type="button" value="mutation" onclick="gradients4();" />
<input type="button" value="CircleOne" onclick="gradients5();" />
<input type="button" value="CircleTwo" onclick="gradients6();" />
<script type="text/javascript">
function gradients1() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
//create line gradient object
var lingrad = ctx.createLinearGradient(0,0,150,0);
//add color
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients2() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
//create line
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.4, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients3() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createLinearGradient(0,0,150,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients4() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(0.5, 'white');
lingrad.addColorStop(0.5, 'green');
lingrad.addColorStop(1, 'white');
ctx.fillStyle = lingrad;
ctx.fillRect(10,10,130,130);
}
function gradients5() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createRadialGradient(75,75,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
function gradients6() {
var ctx = document.getElementById('canvas4').getContext('2d');
ctx.clearRect(0,0,150,150);
var lingrad = ctx.createRadialGradient(5,5,10,75,75,70);
lingrad.addColorStop(0, 'white');
lingrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lingrad;
ctx.arc(75, 75, 70, 0, 360);
ctx.fill();
}
</script>
4.shadow
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
shadowOffsetX and shadowOffsetY are the shadow distance of x and y;
shadowBlur is 0-1
my example file test4-4.html:
<canvas id="canvas5" width="150" height="150" style=" background-color: black">
you are out!
</canvas><br/>
<input type="button" value="pic shadow" onclick="shadow1();" />
<input type="button" value="txt shadow" onclick="shadow2();" />
<script type="text/javascript">
function shadow1() {
var ctx = document.getElementById('canvas5').getContext('2d');
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 130, 130);
}
function shadow2() {
var ctx = document.getElementById('canvas5').getContext('2d');
ctx.clearRect(0,0,150,150);
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(255, 255, 255, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "red";
ctx.fillText("Sample String", 15, 70);
}
</script>
references:
http://www.blogjava.net/myqiao/category/46360.html
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 205MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 692Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1152Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 901MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 599AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 10752018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 5692018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5192018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5702018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 557Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1243Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 691Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 573Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 771Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 604Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 628Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 845Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 737Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 447Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1076ReactJS(5)Composition vs Inheri ...
相关推荐
三茗OEM COLORFUL的一键还原。在BIOS DMI中要加入COLORFUL
Colorful Colorful is a dynamic theme library allowing you to change your apps' color schemes easily. License Colorful is licensed under the Apache 2.0 License, in common Android style. Copyright 2016...
unity Colorful FX 特效插件
SecureCRT配色方案源代码-colorful-network.ini。终端有一个好的配色,不仅能保护自己的眼睛,也能给人一个好心情,本配色方案适合任意一种SSH客户端软件。
SecureCRT配置颜色添加colorful-network脚本
Unity Colorful FX4.2.2.unitypackage
VS背景及环境插件Colorful-IDE -->So Cold Weather
unity3d Colorful FX是一款快速和可定制的后期处理效果和颜色调整的统一集合工具。(unity十大热门工具) 些资源来自unity商店,仅限于个人学习研究,请勿用于任何商业用途,请支持或购买正版,尊重版权.
Colorful 一个动态主题库,您可以轻松地更改您的应用程序的配色方案。
Unity Colorful FX 希望对开发者有用,资源官方地址:https://assetstore.unity.com/packages/vfx/shaders/fullscreen-camera-effects/colorful-fx-44845
colorful颜色截取小工具,运行时,从程序拖动光标到任何位置,即可得到此位置的颜色。 编辑网页,参考网上网页的颜色有用。 编辑图片,修补颜色可以参考。
Java精准 'get' MAC/IP4/IP6/子网掩码/网关/适配器/计算机信息colorful1.2框架插件 (Windows操作系统提供的数据API上获取并且写成Java插件) 你可以通过:http://t.csdn.cn/RGeGr文章来查看教程使用方式
crt高亮显示代码包,真实有效!购买后,免费私聊教学,谢谢光顾。
1. 首先在工具栏找到Options->...2. 在工具栏找到Options->Global Options->Default Session 点击Edit Default Setting,然后再选Keyword Highlighting选择colorful-network配置文件即可。 3.我的CRT是Version 9.0.2
colorful.js 能让 HTML 元素具有自定义的颜色变幻背景。 colorful.js 通过用户自定义关键帧的颜色,使用css3实现颜色渐变功能。在低版本浏览器会通过javascript来实现。在线演示最简单用法:startLoop(document....
Colorful - Image Effects v4.1 - 相机调色插件,unity版本需要是5.x;
使用jQuery实现进度显示及控制,可以配置进度颜色
5.依据词频表对已有编码表排序 6.码表重复词条一次删除 7.丰富的码表排序操作,可对码表进行分类信息提取,如提取单字编码、二字词等 8.丰富的码表统计信息,如重码率、码元占用率等 9.更为重要的,支持...
Unity后期调色插件