您现在的位置是:网站首页>>前端技术>>html+css+js

canvas 绘制图片

发布时间:2019-12-31 18:16:48作者:wangjian浏览量:58点赞量:0

    前面我们了解了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'; // 设置图片源地址

    image.png

    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'; // 设置图片源地址

    image.png

    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'; // 设置图片源地址

    image.png

0 +1