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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     
19     var lineCap = ['butt','round','square'];
20     //绘制参考线
21     ctx.strokeStyle = 'red';
22     ctx.beginPath();
23     ctx.moveTo(10,10);
24     ctx.lineTo(10,150);
25     ctx.moveTo(150,10);
26     ctx.lineTo(150,150);
27     ctx.stroke();
28     //绘制直线段
29     ctx.strokeStyle = 'blue';
30     for( var i=0; i<lineCap.length; i++){
31         ctx.lineWidth = 20;
32         ctx.lineCap = lineCap[i];
33         ctx.beginPath();
34         ctx.moveTo(10,30+i*50);
35         ctx.lineTo(150,30+i*50);
36         ctx.stroke();
37     }
38     
39 }
40 </script>
41 </head>
42 <body>
43     <div id="div1">
44         <canvas id="myCanvas" width="300" height="300"></canvas>
45     </div>
46 </body>
47 </html>

View Code

效果展示：

b、ctx.lineJoin

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     
19     var lineJoin = ['round','bevel','miter'];
20     ctx.strokeStyle = 'red';
21     
22     for( var i=0; i<lineJoin.length; i++){
23         ctx.lineWidth = 20;
24         ctx.lineJoin = lineJoin[i];
25         ctx.beginPath();
26         ctx.moveTo(10+i*150,30);
27         ctx.lineTo(100+i*150,30);
28         ctx.lineTo(100+i*150,100);
29         ctx.stroke();
30     }
31     
32 }
33 </script>
34 </head>
35 <body>
36     <div id="div1">
37         <canvas id="myCanvas" width="600" height="300"></canvas>
38     </div>
39 </body>
40 </html>

View Code

效果展示：

c、miterLimit

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     ctx.translate(30,40);
19     for( var i=0; i<10; i++){
20         ctx.strokeStyle = '#FF5D43';
21         ctx.lineWidth = 10;
22         ctx.lineJoin = 'miter';
23         ctx.miterLimit = i*10;
24         ctx.beginPath();
25         ctx.moveTo(10,i*30);
26         ctx.lineTo(100,i*30);
27         ctx.lineTo(10,i*33);
28         ctx.stroke();
29     }
30     
31 }
32 </script>
33 </head>
34 <body>
35     <div id="div1">
36         <canvas id="myCanvas" width="300" height="400"></canvas>
37     </div>
38 </body>
39 </html>

View Code

效果显示：

2、绘制线性变化

ctx.createLinearGradient(x1,y1,x2,y2); x1、y1为渐变的起点， x2，y2为渐变的终点

使用addColorStop(position,color)方法进行上色，

eg：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     var lingrad = ctx.createLinearGradient(0,0,0,200);
19      lingrad.addColorStop(0,'#f00');
20      lingrad.addColorStop(1/7,'#f90');
21      lingrad.addColorStop(2/7,'#ff0');
22      lingrad.addColorStop(3/7,'#0f0');
23      lingrad.addColorStop(4/7,'#0ff');
24      lingrad.addColorStop(5/7,'#00f');
25      lingrad.addColorStop(6/7,'#f0f');
26      lingrad.addColorStop(1,'#f00');
27      ctx.fillStyle = lingrad;
28      ctx.strokeStyle = lingrad;
29      ctx.fillRect(10,10,200,200);
30 }
31     
32 </script>
33 </head>
34 <body>
35     <div id="div1">
36         <canvas id="myCanvas" width="300" height="400"></canvas>
37     </div>
38 </body>
39 </html>

View Code

3、绘制径向渐变

要绘制径向变化，首先要使用createRadialGradient方法创建canvasGradient。然后即可使用addColorStop方法定义色标的位置并进行上色。

ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); 其中x1,y1,r1定义一个为以（x1,y1)为坐标，半径为r1的圆，x2,y2,r2定义一个为以（x2,y2)为坐标，半径为r2的圆，

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     var radgrad = ctx.createRadialGradient(55,55,20,100,100,90);
19     radgrad.addColorStop(0,'#fff');
20     radgrad.addColorStop(0.5,'#f00');
21     radgrad.addColorStop(1,'#000');
22     
23     ctx.fillStyle = radgrad;
24     ctx.fillRect(10,10,200,200);
25 }
26     
27 </script>
28 </head>
29 <body>
30     <div id="div1">
31         <canvas id="myCanvas" width="300" height="400"></canvas>
32     </div>
33 </body>
34 </html>

View Code

4、绘制图案

在多数绘图软件中都有填充图案这个功能，在canvas中，有 createPattern 方法来实现图案效果。

ctx.createPattern(image,type);

其中参数image为要引用的image对象或另一个canvas对象，type是所引用对象的平铺类型，如：repeat、repeat-x， repeat-y，no-repeat必须为下面的字符串值之一。

创建图案的步骤与创建渐变有些类似，需要首先创建出一个pattern，然后再赋予其fillStyle属性或strokeStyle属性。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 function draw(){
17     var ctx = document.getElementById('myCanvas').getContext('2d');
18     var img = new Image();
19     img.src = 'butterf.png';
20     img.onload = function(){
21         //创建图案
22         var prtn = ctx.createPattern(img,'repeat');
23         ctx.fillStyle = prtn;
24         ctx.fillRect(0,0,600,600);
25     };
26     
27 }
28     
29 </script>
30 </head>
31 <body>
32     <div id="div1">
33         <canvas id="myCanvas" width="500" height="500"></canvas>
34     </div>
35 </body>
36 </html>

View Code

5、设置图片的透明度

使用globalAlpha可以设置图形的透明度，改方法适合为大量图形设置相同的透明度。除此之外，还可以通过设置色彩透明度的参数来为图形设置不同的透明度。

即rgba(r,g,b,a);

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width:300px; height: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 
17 function draw(){
18     var c = document.getElementById('myCanvas');
19     var ctx = c.getContext('2d');
20     ctx.translate(180,20);
21     
22     for(var i=0; i<50; i++){
23         ctx.save();
24         ctx.transform(0.95,0,0,0.95,30,30);
25         ctx.rotate(Math.PI/12);
26         ctx.beginPath();
27         ctx.fillStyle = 'rgba(255,0,0,'+(1-(i+10)/40)+')';
28         ctx.arc(0,0,50,0,Math.PI*2,true);
29         ctx.closePath();
30         ctx.fill();
31     }
32 }
33 </script>
34 </head>
35 <body>
36     <div id="div1">
37         <canvas id="myCanvas" width="300" height="300"></canvas>
38     </div>
39 </body>
40 </html>

View Code

6、创建阴影

在canvas中创建阴影效果，需要用到下面这4个属性：shadowOffsetX（阴影的水平偏移）、shadowOffsetY（阴影的垂直偏移）、shadowBlur（阴影羽化的程度）和shadowColor（阴影的颜色），默认为黑色，可以添加透明度。用法如下：

ctx.shadowOffsetX = float;

ctx.shadowOffsetY = float;

ctx.shadowBlur = float;

ctx.shadowColor = color;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{padding: 0;margin:0;}
 8 body{background: #1b1b1b;}
 9 #div1{margin:50px auto; width:300px; height: 300px;}
10 canvas{background: #fff;}
11 </style>
12 <script type="text/javascript">
13 window.onload = function(){
14     draw();    
15 };
16 
17 function draw(){
18     var ctx = document.getElementById('myCanvas').getContext('2d');
19     //设置阴影
20     ctx.shadowOffsetX = 3;    //水平偏移
21     ctx.shadowOffsetY = 8;    //垂直偏移
22     ctx.shadowBlur = 2;    //羽化程度
23     ctx.shadowColor = 'rgba(255,0,0,0.5)';
24     //绘制矩形
25     ctx.fillStyle = '#3cf';
26     ctx.fillRect(20,20,300,60);
27     ctx.fill();
28     
29     //绘制文本
30     ctx.font = '40px 微软雅黑';
31     ctx.fillStyle = '#fff';
32     ctx.fillText('HTML5+CSS3',30,64);
33 }
34 </script>
35 </head>
36 <body>
37     <div id="div1">
38         <canvas id="myCanvas" width="400" height="300"></canvas>
39     </div>
40 </body>
41 </html>

View Code

posted @ 2015-01-09 11:14 远方的远方阅读(1201) 评论(0) 编辑收藏举报

刷新页面返回顶部

远方的远方

花开堪折直须折，莫待无花空折枝。

canvas线性变换、颜色和样式选择

公告