[HTML5 graphics and animation using image] 2. 1. Import image zoomed image 3. The image cropping

The following notes to study this book do the following figure, unoriginal. Notes mainly to practice it and see the results deepen our memory.

 

table of Contents:

1. Import Image 2. zoomed image 3. crop the image

 

1.Import Images

To import images: Step 1: determining the source of the image Step 2: Use the drawImage () method of the image drawing on the canvas

OK Source There are four methods:

Within the page image Ⅰ

Ⅱ other canvas elements

Ⅲ create a new image object with the script

Use Ⅳ data: url reference image

① to create a new image object approach to identify the source of the image, import the image

Statement:

 1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         var ctx = document.getElementById('canvas').getContext('2d');
 6 //第 1 步，确定图像来源
 7         var img = new Image();          //Create a new Image object 
8          // If you want to solve the problem of pre-loaded images, you can use the function onload event while loading images while executed drawn image 
9          img. Onload  =  function () {        
 10  // Step 2, drawImage ( ) the method of the image drawing on the canvas 
. 11              CTX. the drawImage (IMG, 0 , 0 );
 12 is          }
 13 is          img.src =  ' 1.jpg ' ;       // set the image path 
14      }
 15  </ Script >

Page performance:

 Using the drawImage () method to draw part of the image, and increase or decrease the size of the image. Usage is as follows:

Syntax 1: position the image on the canvas

context.drawImage( img, x , y )

Parameters: img: image specified to be used, canvas or video

　　　　　　x: x position to start cut

　　　　　　y ：开始剪切的 y 坐标位置

语法2: 在画布上定位图像，并规定图像的宽度和高度

context.drawImage( img, x , y，width, height )

参数说明： width：要使用的图片的宽度

　　　　　height：要使用的图片的高度

语法3：剪切图像，并在画布上定位被剪切的部分

context.drawImage( img, sx , sy，swidth, sheight, width, height )

参数说明：　  sx：开始剪切的 x 坐标的位置

　　　　　　 sy ：开始剪切的 y 坐标的位置

　　　　　 width：被剪切图像的宽度

　　　　　height：被剪切图像的高度

 

2.缩放图像

① 设置导入的图像放大显示，并仅仅显示头部位置

语句：

 1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         var ctx = document.getElementById('canvas').getContext('2d');
 6         var img = new Image();
 7         img.onload = function(){    
 8             //context.drawImage( img, x , y，width, height )    
 9             ctx.drawImage(img, -300, -40, 1000, 800);
10         }
11         img.src = '1.jpg';
12     }
13 </script>

页面表现：

 

 

3.裁切图像

语句：

 1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         var ctx = document.getElementById('canvas').getContext('2d');
 6         var img = new Image();
 7         img.onload = function(){      
 8             //context.drawImage( img, sx , sy，swidth, sheight, width, height )  
 9             ctx.drawImage(img, 0, 0, 230, 200, 20, 20, 400, 400);
10         }
11         img.src = '1.jpg';
12     }
13 </script>

页面表现：

 

4. 平铺图像

① 使用drawImage() 方法

语句：

 1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         var ctx = document.getElementById('canvas').getContext('2d');
 6         var img = new Image();
 7         img.src = "1.jpg";
 8         img.onload = function(){    
 9             var scale = 5;          //平铺比例
10             var n1 = img.width/scale;     //缩小后图像宽度
11             var n2 = img.height/scale;    //缩小后图像高度
12             var n3 = canvas.width/n1;       //平铺横向个数
13             var n4 = canvas.height/n2;      //平铺纵向个数
14             for( var i=0; i<n3; i++ ){
15                 for( var j=0; j<n4; j++ ){
16                     ctx.drawImage(img, i*n1, j*n2, n1, n2);
17                 }
18             }
19         };
20     }
21 </script>

页面表现：

② 指定图像文件之后，使用 createPattern() 方法创建填充样式，然后将该样式指定给图形上下文对象的 fillStyle 属性，最后填充画布。

语句：

 1 <canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas>
 2 <script>
 3     draw();
 4     function draw(){
 5         var ctx = document.getElementById('canvas').getContext('2d');
 6         var img = new Image();
 7         img.src = "1.png";
 8         img.onload = function(){    
 9             var ptrn = ctx.createPattern(img, 'repeat');    //创建填充样式，全方向平铺
10             ctx.fillStyle = ptrn;               //创建填充样式
11             ctx.fillRect(0, 0, 500, 500);       //填充画布
12         };
13     }
14 </script>

页面表现：