【HTML5 绘图与动画】 使用图像 1.导入图像 2.缩放图像 3.裁切图像

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

目录：

1.导入图像 2.缩放图像 3.裁切图像

1.导入图像

导入图片的步骤：第 1 步：确定图像来源  第 2 步：使用 drawImage() 方法将图像绘制到 canvas 中

确定图片来源有4种方法:

Ⅰ 页面内的图像

Ⅱ 其它canvas元素

Ⅲ 用脚本创建一个新的 image 对象

Ⅳ 使用 data:url 方式引用图像

① 以创建一个新的image对象的方式来确定图像来源，导入图像

语句：

<canvas id="canvas" width="500" height="500" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        var ctx = document.getElementById('canvas').getContext('2d');
//第 1 步，确定图像来源
        var img = new Image();          //创建新的 Image 对象
        //如果要解决图片预装载的问题，可以使用 onload 事件一边装载图像一边执行绘制图像的函数
        img.onload = function(){        
//第 2 步，使用 drawImage() 方法将图像绘制到 canvas 中
            ctx.drawImage(img, 0, 0);
        }
        img.src = '1.jpg';      //设置图像路径
    }
</script>

页面表现：

 使用 drawImage() 方法能够绘制图像的某些部分，以及增加或减少图像的尺寸。用法如下：

语法1：在画布上定位图像

context.drawImage( img, x , y )

参数说明：img : 规定要使用的图像、画布或视频

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

　　　　　　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.缩放图像

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

语句：

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

页面表现：

3.裁切图像

语句：

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

页面表现：

4. 平铺图像

① 使用drawImage() 方法

语句：

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

页面表现：

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

语句：

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

页面表现：