canvas線性變換、顏色和樣式選擇

時間  2019-12-14
標籤 canvas 線性變換 顏色 樣式 選擇 简体版
原文   原文鏈接

一、應用不一樣的線型javascript

ctx.lineWidth = value; 線條的寬度，默認爲1css

ctx.lineCap = type; 設置端點樣式， type默認爲butt,可選值round,square,butthtml

ctx.lineJoin = type; 設置鏈接處樣式，type默認爲miter，可選值round，bevel，miterjava

ctx.miterLimit = value; 設置繪製交點的方式，miterLimit屬性的做用是斜面的長度設置一個上線，默認爲10，當斜面的長度達到線條寬度的10倍時，就會變爲斜角，若是lineJoin屬性值爲round或bevel時，miterLimit屬性無效。canvas

 

a、ctx.lineCapide

 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

效果展現：spa

 

 

b、ctx.lineJoin3d

 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

效果展現： code

 

c、miterLimitorm

 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

效果顯示：

 

 

二、繪製線性變化

ctx.createLinearGradient(x1,y1,x2,y2); x一、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

 

三、繪製徑向漸變 

要繪製徑向變化，首先要使用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

 

四、繪製圖案

在多數繪圖軟件中都有填充圖案這個功能，在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

 

五、設置圖片的透明度

使用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

 

六、建立陰影

在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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程