canvas 绘制图片

前面我们了解了canvas的一些基本使用方法，在canvas中我们还可以在canvas中直接绘制图片，在canvas中绘制图片主要使用到drawImage方法

一：drawImage方法参数有三中情况

1：三个参数

ctx.drawImage(image,dx,dy)

image：需要绘制的img图片

dx,dy：绘制的img图片在canvas中的坐标(x,y)

2：五个参数

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

image：需要绘制的img图片

dx,dy：绘制的img图片在canvas中的坐标(x,y)

dw,dh：绘制的img图片在canvas中的大小(w,h)宽高

3：9个参数(用于切片)，通俗的说就是将图片进行特定裁剪然后放到指定的位置

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

image：需要绘制的img图片

sx, sy, sw, sh：定义图像源的切片位置和大小

dx, dy, dw, dh：定义切片的目标显示位置和大小

二：在canvas中绘制图片分两种情况

1：有现成的img图片，将img标签中的图片绘制到canvas中

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = document.querySelector("img");
//绘制图片
ctx.drawImage(img, 0, 0)

2：从零开始创建图片

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){
    ctx.drawImage(img, 0, 0)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址

三：根据上面drawImage参数的三种情况，我们来分别实现，看看效果

1：ctx.drawImage(image,dx,dy)：将原始图片绘制到canvas中

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){
    ctx.drawImage(img, 0, 0)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址

 

2：ctx.drawImage(image,dx,dy,dw,dh)：给图片设置大小绘制到canvas中

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){
    ctx.drawImage(img, 0, 0, 50, 50)//绘制图片
}
img.src = 'wj.jpg'; // 设置图片源地址

3:ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)：切片，将图片进行特定裁剪然后放到指定的位置

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return '不支持canvas'
}
var ctx=canvas.getContext("2d")
//创建图片
var img = new Image();   // 创建一个<img>元素
img.onload = function(){
    ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 250)
}
img.src = 'wj.jpg'; // 设置图片源地址