canvas线性变换、颜色和样式选择
1、应用不同的线型
ctx.lineWidth = value; 线条的宽度，默认为1
ctx.lineCap = type; 设置端点样式， type默认为butt,可选值round,square,butt
ctx.lineJoin = type; 设置连接处样式，type默认为miter，可选值round，bevel，miter
ctx.miterLimit = value; 设置绘制交点的方式，miterLimit属性的作用是斜面的长度设置一个上线，默认为10，当斜面的长度达到线条宽度的10倍时，就会变为斜角，如果lineJoin属性值为round或bevel时，miterLimit属性无效。
a、ctx.lineCap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
};
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d'); var lineCap = ['butt','round','square'];
//绘制参考线
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,150);
ctx.moveTo(150,10);
ctx.lineTo(150,150);
ctx.stroke();
//绘制直线段
ctx.strokeStyle = 'blue';
for( var i=0; i<lineCap.length; i++){
ctx.lineWidth = 20;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(10,30+i*50);
ctx.lineTo(150,30+i*50);
ctx.stroke();
} }
</script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="300" height="300"></canvas>
</div>
</body>
</html>
效果展示：
b、ctx.lineJoin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
};
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d'); var lineJoin = ['round','bevel','miter'];
ctx.strokeStyle = 'red'; for( var i=0; i<lineJoin.length; i++){
ctx.lineWidth = 20;
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(10+i*150,30);
ctx.lineTo(100+i*150,30);
ctx.lineTo(100+i*150,100);
ctx.stroke();
} }
</script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="600" height="300"></canvas>
</div>
</body>
</html>
效果展示：
c、miterLimit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
};
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.translate(30,40);
for( var i=0; i<10; i++){
ctx.strokeStyle = '#FF5D43';
ctx.lineWidth = 10;
ctx.lineJoin = 'miter';
ctx.miterLimit = i*10;
ctx.beginPath();
ctx.moveTo(10,i*30);
ctx.lineTo(100,i*30);
ctx.lineTo(10,i*33);
ctx.stroke();
} }
</script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="300" height="400"></canvas>
</div>
</body>
</html>
效果显示：
2、绘制线性变化
ctx.createLinearGradient(x1,y1,x2,y2); x1、y1为渐变的起点， x2，y2为渐变的终点
使用addColorStop(position,color)方法进行上色，
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
};
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
var lingrad = ctx.createLinearGradient(0,0,0,200);
lingrad.addColorStop(0,'#f00');
lingrad.addColorStop(1/7,'#f90');
lingrad.addColorStop(2/7,'#ff0');
lingrad.addColorStop(3/7,'#0f0');
lingrad.addColorStop(4/7,'#0ff');
lingrad.addColorStop(5/7,'#00f');
lingrad.addColorStop(6/7,'#f0f');
lingrad.addColorStop(1,'#f00');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad;
ctx.fillRect(10,10,200,200);
} </script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="300" height="400"></canvas>
</div>
</body>
</html>
3、绘制径向渐变
要绘制径向变化，首先要使用createRadialGradient方法创建canvasGradient。然后即可使用addColorStop方法定义色标的位置并进行上色。
ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); 其中x1,y1,r1定义一个为以（x1,y1)为坐标，半径为r1的圆，x2,y2,r2定义一个为以（x2,y2)为坐标，半径为r2的圆，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
};
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
var radgrad = ctx.createRadialGradient(55,55,20,100,100,90);
radgrad.addColorStop(0,'#fff');
radgrad.addColorStop(0.5,'#f00');
radgrad.addColorStop(1,'#000'); ctx.fillStyle = radgrad;
ctx.fillRect(10,10,200,200);
} </script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="300" height="400"></canvas>
</div>
</body>
</html>
4、绘制图案
在多数绘图软件中都有填充图案这个功能，在canvas中，有 createPattern 方法来实现图案效果。
ctx.createPattern(image,type);
其中参数image为要引用的image对象或另一个canvas对象，type是所引用对象的平铺类型，如：repeat、repeat-x， repeat-y，no-repeat必须为下面的字符串值之一。
创建图案的步骤与创建渐变有些类似，需要首先创建出一个pattern，然后再赋予其fillStyle属性或strokeStyle属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
};
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = 'butterf.png';
img.onload = function(){
//创建图案
var prtn = ctx.createPattern(img,'repeat');
ctx.fillStyle = prtn;
ctx.fillRect(0,0,600,600);
}; } </script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="500" height="500"></canvas>
</div>
</body>
</html>
5、设置图片的透明度
使用globalAlpha可以设置图形的透明度，改方法适合为大量图形设置相同的透明度。 除此之外，还可以通过设置色彩透明度的参数来为图形设置不同的透明度。
即rgba(r,g,b,a);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
}; function draw(){
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.translate(180,20); for(var i=0; i<50; i++){
ctx.save();
ctx.transform(0.95,0,0,0.95,30,30);
ctx.rotate(Math.PI/12);
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,'+(1-(i+10)/40)+')';
ctx.arc(0,0,50,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
}
</script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="300" height="300"></canvas>
</div>
</body>
</html>
6、创建阴影
在canvas中创建阴影效果，需要用到下面这4个属性：shadowOffsetX（阴影的水平偏移）、shadowOffsetY（阴影的垂直偏移）、shadowBlur（阴影羽化的程度）和shadowColor（阴影的颜色），默认为黑色，可以添加透明度。用法如下：
ctx.shadowOffsetX = float;
ctx.shadowOffsetY = float;
ctx.shadowBlur = float;
ctx.shadowColor = color;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){
draw();
}; function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
//设置阴影
ctx.shadowOffsetX = 3; //水平偏移
ctx.shadowOffsetY = 8; //垂直偏移
ctx.shadowBlur = 2; //羽化程度
ctx.shadowColor = 'rgba(255,0,0,0.5)';
//绘制矩形
ctx.fillStyle = '#3cf';
ctx.fillRect(20,20,300,60);
ctx.fill(); //绘制文本
ctx.font = '40px 微软雅黑';
ctx.fillStyle = '#fff';
ctx.fillText('HTML5+CSS3',30,64);
}
</script>
</head>
<body>
<div id="div1">
<canvas id="myCanvas" width="400" height="300"></canvas>
</div>
</body>
</html>
canvas线性变换、颜色和样式选择的更多相关文章
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- python 输出颜色与样式的方法
上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...
- 色彩缤纷的python（改变字体颜色及样式不完全版）
色彩缤纷的python(改变字体颜色及样式) *补上昨天随笔中提到的改变字体颜色样式的方法,昨日随笔https://www.cnblogs.com/Du704/p/11265958.html 在项目过 ...
- 色彩缤纷的Python（改变字体颜色及样式）
色彩缤纷的python(改变字体颜色及样式) 在项目过程中,我们常常会因为输出信息的颜色与样式过于单调以至于让人在视觉上感到很杂乱,所以看下文: 在Linux终端中,使用转义序列来进行如上所述的显示, ...
- python输出颜色与样式的方法
一.输出颜色与样式的方法 上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python ...
- 黄聪：phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...
- 基于jquery封装的颜色下拉选择框
应同事要求,花了半个小时,写了一个简单的选择颜色的下拉框控件,可以控制输入框指示结果颜色 也贴出来,说不定哪天有用 if (typeof jQuery === 'undefined') { throw ...
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转:http://www.cnblogs.com/huangcong/p/3687665.html 首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包 ...
随机推荐
- python全栈开发从入门到放弃之装饰器函数
什么是装饰器#1 开放封闭原则:对扩展是开放的,对修改是封闭的#2 装饰器本身可以是任意可调用对象,被装饰的对象也可以是任意可调用对象#3 目的:''' 在遵循 1. 不修改被装饰对象的源代码 2. ...
- JVM内存分配原理
堆栈常量池等内存分配原理详解 存储的方式: 寄存器 栈(stack) 堆(heap) 静态域 常量池 非RAM存储 JAVA寄存器 最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. ...
- Oracle 分组函数
分组函数的介绍 分组函数作用于一组数据,并对一组数据返回一个值. (引用网上的一张图) 分组函数的使用规则 SELECT [column,] group_function(column) FROM t ...
- 下一个亿万市场：企业级SaaS服务谁能独领风骚
注:SaaS是Software-as-a-Service(软件即服务)的简称,一种完全创新的软件应用模式,简单来说SaaS即为提供商基于互联网为企业提供软件服务. 对中小型企业来说:SaaS是采用先 ...
- bash 获取时间段内的日志内容
需求,获取时段内的/var/log/messages文件内出现错误的消息,支持多行的消息,支持天,小时分钟,秒级的区间,可以修改监控的日志对象 #!/bin/bash if [ $# != 1 ] ; ...
- 论文笔记：空间变换网络（Spatial Transformer Networks）
2015, NIPS Max Jaderberg, Karen Simonyan, Andrew Zisserman, Koray Kavukcuoglu Google DeepMind 为什么提出( ...
- c++之旅:多态
多态 同一消息根据发送对象的不同而产生不同的行为,多态是建立的在封装和继承的基础之上 一个小案例引发的问题 #include <iostream> using namespace std; ...
- Ubuntu16.04系统Python3相关环境或模块安装
前提:一般用户安装都命令前都需要sudo ,或者在root用户下 1.Ubuntu 16.04 安装PyCharm Ubuntu 16.04 安装PyCharm 本文通过第三方源安装PyCharm,好 ...
- servlet的总结
tomcat在启动的时候 加载webapp下面的web.xml,加载里面定义的servlet. web.xml文件有两部分:servlet类定义和servlet映射定义每个被载入的servlet类都有 ...
- 【Deep Learning】两层CNN的MATLAB实现
想自己动手写一个CNN很久了,论文和代码之间的差距有一个银河系那么大. 在实现两层的CNN之前,首先实现了UFLDL中与CNN有关的作业.然后参考它的代码搭建了一个一层的CNN.最后实现了一个两层的C ...