绘制图片

在canvas中，我们可以使用drawImage()方法来绘制图片。

drawImage()方法共有三种调用方式

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

drawImage(image,dx,dy)

说明：

参数image表示页面中的图片。该图片可以是页面中的img元素，也可以是js创建的Image对象。参数dx表示图片左上角的横坐标，dy表示图片左上角的纵坐标。

预备代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id = "canvas" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>

<script>
    window.onload = function() {
        //写逻辑
    }
</script>
</html>

效果图如下：

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

let image = new Image();
image.src = "./head.jpg";

image.onload = function(){
   cxt.drawImage(image,10,10);   
}

必须在图片载入完成之后才能将图片绘制到canvas上，否则图片不显示

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

说明：

参数image表示页面中的图片。该图片可以是页面中的img元素，也可以是js创建的Image对象。参数dx表示图片左上角的横坐标，dy表示图片左上角的纵坐标，dw和dh分别表示图片的宽度和高度。这种方式可以对图片进行缩放，然后再显示在canvas上。

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

let image = new Image();
image.src = "./head.jpg";

image.onload = function(){
   cxt.drawImage(image,10,10，50,50);   
}

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

参数sx,sy,sw,sh表示源图像要截取的范围

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

let image = new Image();
image.src = "./head.jpg";

image.onload = function(){
   cxt.drawImage(image,0,0,50,50,10,10,50,50);
}

效果图如下：

平铺图片

在canvas中，我们可以使用createPattern()方法来定义图片的平铺方式，此外该方法还可以用于平铺canvas元素

语法：

let pattern = cxt.createPattern(image,type); cxt.fillStyle = pattern; cxt.fillRect();

属性值	说明
repeat	默认值，在水平和垂直方向都平铺
repeat-x	在水平方向平铺
repeat-y	在垂直方向平铺
no-repeat	不平铺

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

let image = new Image();
image.src = "./head.jpg";

image.onload = function(){
   let pattern = cxt.createPattern(image,'repeat');
   cxt.fillStyle = pattern;
   cxt.fillRect(0,0,canvas.width,canvas.height);
}

效果图如下：

切割图片

在canvas中，我们可以使用clip()方法来切割canvas中绘制的图片

说明：

想要切割一张图片，一般需要三步:

绘制基本图形
使用clip()方法
绘制图片


let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.beginPath();
cxt.arc(150,150,50,0,360 * Math.PI / 180, true);
cxt.closePath();
cxt.stroke();

cxt.clip();

let image = new Image();
image.src = "./head.jpg";
image.onload = function(){
   cxt.drawImage(image,100,100);
}

效果图如下：

封面制作网站 ColorFu
文章内容参考莫振杰著《HTML5 CANVAS开发详解》，感兴趣的同学可以阅读一下这本书，如有错误，欢迎指正！！

canvas学习--图片操作

绘制图片

drawImage(image,dx,dy)

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

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

平铺图片

切割图片