[js高手之路] html5 canvas系列教程 - 圖片操作(drawImage,clip,createPattern)

本文轉載自查看原文 2017-09-27 11:41 1890 drawImage/ canvas/ 圖片/ html5

接着上文[js高手之路] html5 canvas系列教程 - 文本樣式(strokeText,fillText,measureText,textAlign,textBaseline)繼續，本文介紹的內容是canvas開發，特別是游戲中，比較常用的內容：圖片處理。在游戲中的資源大多數都是加載圖片.

一、canvas怎么加載圖片？

canvas提供3種圖片加載的API調用方式.

drawImage( image, dx, dy )

drawImage( image, dx, dy, dw, dh )

drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )

image:就是圖片對象，這個圖片對象可以是動態創建出來的，也可以是頁面上已經存在的圖片元素

dx, dy: 就是圖片需要加載到canvas上的坐標位置

dw,dh：如果加載之后的圖片尺寸不對，可以通過這兩個參數，調整寬度與高度

sx,sy,sw,sh: s就是source的意思，這四個參數是第三種調用方式特有的，第三種調用方式就是允許裁剪圖片的某部分，然后在加載到canvas畫布上.

1，動態創建圖片

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' );
11 
12     var oImg = new Image();
13     oImg.src = './img/mv.jpg';
14     oImg.onload = function(){
15         oGc.drawImage( oImg, 100, 100 );
16     }
17 }
18 </script>
19 </head>
20 <body>
21 <canvas id="canvas" width="500" height="400"></canvas>
22 </body>

對於動態創建的圖片對象，一定要用onload把這張圖片加載完成之后，才能渲染在canvas上，否則是不會渲染的.

2，把頁面上已經存在的圖片加載進來

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         oImg = document.querySelector( "img" );
12         oGc.drawImage( oImg, 100, 100 );
13 }
14 </script>
15 </head>
16 <body>
17 <canvas id="canvas" width="500" height="400"></canvas>
18 <img src="./img/mv.jpg" alt="">
19 </body>

頁面上已經存在的圖片，是不需要加載的，因為他已經加載出來了，用選擇器直接獲取就可以加載到canvas中.

3，調整圖片大小

1     var oCanvas = document.querySelector( "#canvas" ),
2         oGc = oCanvas.getContext( '2d' ),
3         oImg = document.querySelector( "img" );
4         oGc.drawImage( oImg, 100, 100, 100, 100 );

這張圖片的原始尺寸是200x200，加載到canvas中，把他調整成100x100

如果是動態創建的圖片，也沒有問題

1     var oCanvas = document.querySelector( "#canvas" ),
2         oGc = oCanvas.getContext( '2d' );
3 
4     var oImg = new Image();
5     oImg.src = './img/mv.jpg';
6     oImg.onload = function(){
7         oGc.drawImage( oImg, 100, 100, 100, 100 );
8     }

4，裁剪某部分圖片，再渲染到canvas上面

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' );
11 
12     var oImg = new Image();
13     oImg.src = './img/mv.jpg';
14     oImg.onload = function(){
15         oGc.drawImage( oImg, 20, 20, 100, 100, 100, 100, 100, 100 );
16     }
17 }
18 </script>
19 </head>
20 <body>
21 <canvas id="canvas" width="500" height="400"></canvas>
22 </body>

從原圖的20, 20這個位置，裁剪出100 x 100這個區域，再渲染到canvas.

二、圖片的平鋪

css的background有平鋪樣式background-repeat，他有4個值( no-repeat【不平鋪】, repeat-x【水平平鋪】，repeat-y【垂直平鋪】，repeat【水平和垂直兩個方向都平鋪】）。

canvas跟這個是類似的，用法：

var pattern = cxt.createPattern( image, type )

cxt.fillStyle = pattern

cxt.fillRect()

image就是圖片對象，type就是平鋪樣式( no-repeat, repeat-x, repeat-y, repeat ).

fillStyle可以給它賦3種值：顏色、圖案、漸變色。顏色在之前已經使用過很多次了.

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     var oImg = new Image();
14     oImg.src = './img/mv.jpg';
15     oImg.onload = function(){
16         var pattern = oGc.createPattern( oImg, 'repeat' );
17         oGc.fillStyle = pattern;
18         oGc.fillRect( 0, 0, width, height );
19     }
20 }
21 </script>
22 </head>
23 <body>
24 <canvas id="canvas" width="800" height="600"></canvas>
25 </body>

repeat-x:

var pattern = oGc.createPattern( oImg, 'repeat-x' );

repeat-y

var pattern = oGc.createPattern( oImg, 'repeat-y');

no-repeat:

var pattern = oGc.createPattern( oImg, 'no-repeat' );

用canvas填充canvas：

創建一個新的canvas，width:200,height:200, 然后再創建一個原心100, 100，半徑100的圓，用這個圓作為填充樣式填充到canvas.

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     var oNewCanvas = document.createElement( "canvas" );
14         oNewCanvas.width = 200,
15         oNewCanvas.height = 200,
16         oNewGc = oNewCanvas.getContext( '2d' );
17         oNewGc.beginPath();
18         oNewGc.fillStyle = '#09f';
19         oNewGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
20         oNewGc.closePath();
21         oNewGc.fill();
22 
23         var pattern = oGc.createPattern( oNewCanvas, 'repeat' );
24         oGc.fillStyle = pattern;
25         oGc.fillRect( 0, 0, width, height );
26 }
27 </script>
28 </head>
29 <body>
30 <canvas id="canvas" width="800" height="600"></canvas>
31 </body>

三、切割圖片clip

用法：

cxt.clip()

步驟：

1，繪制剪切區域

2，調用裁剪方法clip

3，加載被剪切的素材(圖片或者圖形等)

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     oGc.beginPath();
14     oGc.arc( 200, 200, 100, 0, 360 * Math.PI / 180, false );
15     oGc.closePath();
16 
17     oGc.clip();
18 
19     var oImg = new Image();
20     oImg.src = './img/mv.jpg';
21     oImg.onload = function(){
22         oGc.drawImage( oImg, 100, 100 );
23     }
24 }
25 </script>
26 </head>
27 <body>
28 <canvas id="canvas" width="800" height="600"></canvas>
29 </body>

裁剪的區域坐標還是相對canvas.

矩形裁剪：

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     oGc.beginPath();
14     oGc.rect( 10, 10, 150, 150 )
15     oGc.closePath();
16 
17     oGc.clip();
18 
19     var oImg = new Image();
20     oImg.src = './img/mv.jpg';
21     oImg.onload = function(){
22         oGc.drawImage( oImg, 0, 0 );
23     }
24 }
25 </script>
26 </head>
27 <body>
28 <canvas id="canvas" width="800" height="600"></canvas>
29 </body>

用canvas裁剪的圖案，填充canvas

 1 <meta charset='utf-8' />
 2 <style>
 3     #canvas {
 4         border: 1px dashed #aaa;
 5     }
 6 </style>
 7 <script>
 8     window.onload = function () {
 9         var oCanvas = document.querySelector("#canvas"),
10             oGc = oCanvas.getContext('2d'),
11             width = oCanvas.width, height = oCanvas.height;
12 
13         var oNewCanvas = document.createElement( "canvas" );
14             oNewCanvas.width = 200,
15             oNewCanvas.height = 200,
16             oNewGc = oNewCanvas.getContext( '2d' );
17 
18         oNewGc.beginPath();
19         oNewGc.arc(100, 100, 100, 0, 360 * Math.PI / 180, false);
20         oNewGc.closePath();
21 
22         oNewGc.clip();
23 
24         var oImg = new Image();
25         oImg.src = './img/mv.jpg';
26         oImg.onload = function () { //這個一個異步加載，一定要把填充放在圖片完成之后額
27             oNewGc.drawImage(oImg, 0, 0);
28             var pattern = oGc.createPattern( oNewCanvas, 'repeat' );
29             oGc.fillStyle = pattern;
30             oGc.fillRect( 0, 0, width, height );
31         }
32     }
33 
34 </script>
35 </head>
36 
37 <body>
38     <canvas id="canvas" width="800" height="600"></canvas>
39 </body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [js高手之路] html5 canvas系列教程 - 認識canvas以及基本使用方法 [js高手之路] html5 canvas動畫教程 - 勻速運動 HTML5 canvas drawImage() 方法 [js高手之路] es6系列教程 - 解構詳解 [js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配置(中) HTML5 Canvas drawImage圖像繪制 [js高手之路] es6系列教程 - 對象功能擴展詳解 [js高手之路]深入淺出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法 [js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下)