Canvas学习记录之drawImage

小咪咪 2023-07-15 09:00 42阅读 0赞
最新更新时间：2020年03月16日01:06:23

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

概述

本文内容：本文介绍基于drawImage()绘制图片的一些基本用法，基本图片、固定坐标图片、图片裁剪、图片宽高比压缩、圆角图片、圆形头像图片、在固定区域内水平垂直居中

drawImage(image, x, y)

  • 从画布坐标(x,y)开始绘制图片，图片不会被裁剪，宽高比保持不变
  • drawImage(image, 0, 0)

从画布原点坐标开始绘制图片，图片不会被裁剪，宽高比保持不变

在这里插入图片描述

  • drawImage(image, 10, 10)

从画布坐标(10,10)开始绘制图片，图片不会被裁剪，宽高比保持不变

在这里插入图片描述

drawImage(image, x, y, width, height)

  • 从画布坐标(x,y)开始绘制图片，图片不会被裁剪，width和height是画布为图片开辟的可用宽高
  • 如果width或height同时大于或等于图片自身的宽高，此时图片不会被压缩显示
  • 如果width或height有一个小于图片自身的宽高，此时图片会在某一方向被压缩显示
  • drawImage(image, 0, 0, image.width, image.height)

从画布原点坐标开始绘制图片，图片不会被裁剪，宽高比保持不变

  • drawImage(image, 10, 10, image.width, image.height)

从画布坐标(10,10)开始绘制图片，图片不会被裁剪，宽高比保持不变

  • drawImage(image, 0, 0, 200, 100)

图片自身宽高为(200,100)，此时图片不会被压缩显示

在这里插入图片描述

  • drawImage(image, 0, 0, 50, 100)

图片自身宽高为(200,100)，此时图片在水平方向被压缩显示

在这里插入图片描述

  • drawImage(image, 0, 0, 200, 50)

图片自身宽高为(200,100)，此时图片在垂直方向被压缩显示

在这里插入图片描述

drawImage(image, x1, y1, w1, h1, x2, y2, w2, h2)

  • (x1, y1)和(w1, h1)是裁剪图片的起始坐标和宽高
  • (x2, y2)和(w2, h2)是图片在画布上绘制的起始坐标和画布为图片开辟的可用宽高
  • drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height)

从画布原点坐标开始绘制图片，图片不会被裁剪，宽高比保持不变

  • drawImage(image, 100, 0, image.width, image.height, 0, 0, image.width, image.height)

图片自身宽高为(200,100)，从(100,0)裁剪图片，裁剪的宽度image.width为200，相当于横向裁剪了100的空图片

在这里插入图片描述

  • drawImage(image, 100, 0, 100, image.height, 0, 0, image.width, image.height)

图片自身宽高为(200,100)，从(100,0)裁剪图片，裁剪的宽度image.width为100，但画布为图片开辟的可用宽度为200，此时图片水平方向被拉长一倍，图片绘制出的宽高比发生变化

在这里插入图片描述

  • drawImage(image, 0, 0, image.width, image.height, 10, 10, image.width, image.height)

从画布坐标(10,10)开始绘制图片，图片不会被裁剪，宽高比保持不变

在这里插入图片描述

  • drawImage(image, 0, 0, image.width, image.height, 0, 0, 100, image.height)

图片自身宽高为(200,100)，画布为图片开辟的可用宽度为100，此时图片在水平方向被压缩显示

在这里插入图片描述

  • drawImage(image, 0, 0, image.width, image.height, 10, 0, 100, image.height)

图片自身宽高为(200,100)，从画布坐标(10,0)开始绘制图片，画布为图片开辟的可用宽度为100，此时图片在水平方向被压缩显示

在这里插入图片描述

  • drawImage(image, 10, 10, image.width, image.height, 10, 10, image.width, image.height)

从(10, 10)裁剪图片，从画布坐标(10,10)开始绘制图片，图片被裁剪，宽高比保持不变，

在这里插入图片描述

绘制圆形图像

  • 绘制宽高比1:1的图像，图片宽高(100, 100)

在这里插入图片描述

  • 绘制宽高比1:1的图像并裁剪为圆形头像，图片宽高(100, 100)，从画布原点坐标开始绘制

    //DOM

    //JS
    let image = document.getElementById(‘source’);
    image.onload = function(){ 

    1. //保存当前的绘画样式状态
    2. ctx.save();
    3. //绘制一个圆形区域
    4. ctx.beginPath();
    5. ctx.arc(50, 50, 50, 0, 2 * Math.PI);
    6. ctx.clip();
    7. //绘制图片
    8. ctx.drawImage(image, 0, 0, 100, 100);
    9. ctx.restore();

    }

在这里插入图片描述

  • 绘制宽高比2:1的图像并裁剪为圆形头像，图像在圆中水平垂直居中，裁剪后宽高比保持不变，图片宽高(200, 100)，从画布原点坐标开始绘制

    //DOM

    //JS
    var image = document.getElementById(‘source’);
    image.onload = function(){ 

    1. //图片原始宽高
    2. let w = this.width;
    3. let h = this.height;
    4. //半径
    5. let r = 50;
    6. //圆心坐标
    7. let cx = 50;
    8. let cy = 50;
    9. //保存当前的绘画样式状态
    10. ctx.save();
    11. //绘制一个圆形区域
    12. ctx.beginPath();
    13. ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    14. ctx.clip();
    15. //绘制第一个图片
    16. ctx.drawImage(image, w/2 - r, h/2 - r, 2*r, 2*r, 0, 0, 2*r, 2*r);
    17. ctx.restore();
    18. //绘制第二个图片
    19. ctx.drawImage(image, 0, h);
    20. ctx.restore();
    21. //绘制第三个图片
    22. ctx.drawImage(image, 50, 0, 100, 100, 0, 200, w/2, h);
    23. ctx.restore();

    }

在这里插入图片描述

  • 绘制宽高不定的图像并裁剪为圆形头像，圆心和半径不定，在画布上绘制的起始坐标不定，图像在圆中水平垂直居中，裁剪后宽高比保持不变

    //DOM

    //JS
    var image = document.getElementById(‘source’);
    image.onload = function(){ 

    1. //图片原始宽高
    2. let w = this.width;
    3. let h = this.height;
    4. //起点坐标
    5. let x = 40;
    6. let y = 10;
    7. //半径
    8. let r = 50;
    9. //圆心坐标
    10. let cx = r + x;
    11. let cy = r + y;
    12. //保存当前的绘画样式状态
    13. ctx.save();
    14. //绘制一个圆形区域
    15. ctx.beginPath();
    16. ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    17. ctx.clip();
    18. //绘制第一个图片
    19. ctx.drawImage(image, w/2 - r, h/2 - r, 2*r, 2*r, cx-r, cy-r, 2*r, 2*r);
    20. ctx.restore();
    21. //绘制第二个图片
    22. ctx.drawImage(image, 0, 150);
    23. ctx.restore();
    24. //绘制第三个图片 (w, h) (200, 100)
    25. ctx.drawImage(image, 50, 0, 100, 100, 0, 300, w/2, h);
    26. ctx.restore();

    }

在这里插入图片描述

绘制圆角矩形图像

  • 绘制宽高比1:1的图像并裁剪为10px的圆角，图片宽高(100, 100)，从画布原点坐标开始绘制

    //DOM

    //JS
    let image = document.getElementById(‘source’);
    image.onload = function(){ 

    1. //保存当前的绘画样式状态
    2. ctx.save();
    3. //绘制一个圆角矩形
    4. radius();
    5. //绘制图片
    6. ctx.drawImage(image, 0, 0, 100, 100);
    7. ctx.restore();

    }
    function radius(){ 

    1. //矩形起始坐标
    2. let x =0;
    3. let y = 0;
    4. //圆角半径10
    5. let r = 10;
    6. //矩形宽高
    7. let w = 100;
    8. let h = 100;
    9. //开始新路径
    10. ctx.beginPath();
    11. //左上角圆角
    12. ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
    13. //矩形上边线
    14. ctx.lineTo(x+w-r, y);
    15. //右上角圆角
    16. ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
    17. //矩形右边线
    18. ctx.lineTo(x+w, y+h-r);
    19. //右下角圆角
    20. ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
    21. //矩形下边线
    22. ctx.lineTo(x+r, y+h);
    23. //左下角圆角
    24. ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
    25. //矩形左边线
    26. ctx.lineTo(x, y+r);//最后一条边线可用 ctx.closePath() 完成绘制
    27. ctx.clip();

    }

在这里插入图片描述

  • 绘制宽高不定的图像并裁剪为圆角矩形，圆角尺寸不定，矩形宽高不定，在画布上绘制的起始坐标不定，图像在矩形中水平垂直居中，裁剪后宽高比保持不变

    //DOM

    //JS
    var image = document.getElementById(‘source’);
    image.onload = function(){ 

    1. //图片原始宽高
    2. let tw= this.width;
    3. let th = this.height;
    4. //起点坐标
    5. let x = 40;
    6. let y = 10;
    7. //圆角半径
    8. let r = 20;
    9. //保存当前的绘画样式状态
    10. ctx.save();
    11. //绘制一个圆角矩形
    12. //矩形宽高
    13. let w = 120;
    14. let h = 50;
    15. //开始新路径
    16. ctx.beginPath();
    17. //左上角圆角
    18. ctx.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);
    19. //矩形上边线
    20. ctx.lineTo(x+w-r, y);
    21. //右上角圆角
    22. ctx.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);
    23. //矩形右边线
    24. ctx.lineTo(x+w, y+h-r);
    25. //右下角圆角
    26. ctx.arc(x+w-r,y+h-r,r,0,Math.PI/2);
    27. //矩形下边线
    28. ctx.lineTo(x+r, y+h);
    29. //左下角圆角
    30. ctx.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);
    31. //矩形左边线
    32. ctx.lineTo(x, y+r);//最后一条边线可用 ctx.closePath() 完成绘制
    33. ctx.clip();
    34. //绘制第一个图片
    35. ctx.drawImage(image, tw/2 - w/2, th/2 - h/2, w, h, x, y, w, h)
    36. ctx.restore();
    37. //绘制第二个图片
    38. ctx.drawImage(image, 0, 150)
    39. ctx.restore();

    }

在这里插入图片描述

绘制本地图片

  1. //DOM
  2. <img id="source" src="../file/drawImage.png" />
  3. //JS
  4. var image = document.getElementById('source');
  5. image.onload = function(){ 
  6.     ctx.drawImage(image, 0, 0);
  7. }

绘制网络图片

  1. let image = new Image();
  2. image.src = "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg";
  3. image.onload = function(){ 
  4.     ctx.drawImage(image, 0, 0);
  5. }

图像源

drawImage(image, 0, 0) 第一个参数image是绘制到上下文的元素，canvas 图像源CanvasImageSource可以是以下几种：

  • CSSImageValue
  • HTMLImageElement
  • SVGImageElement
  • HTMLVideoElement
  • HTMLCanvasElement
  • ImageBitmap
  • OffscreenCanvas。

new Image()

  • new Image(w, h)，实例化的时候，可以指定参数，参数为实例的宽高

  • 可以动态设置canvas宽高

    const canvas = document.getElementById(‘canvas’);
    const ctx = canvas.getContext(‘2d’);

    let image = new Image(100,50);
    image.src = “https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3173584241,3533290860&fm=26&gp=0.jpg“;

    image.onload = function(){ 

    1. //图片原始宽高
    2. console.log(this.naturalWidth, this.naturalHeight);
    3. //实例化对象new Image(w, h)的指定宽高，如果没有指定，取默认值(this.naturalWidth, this.naturalHeight)
    4. console.log(this.width, this.height);
    5. canvas.width = this.naturalWidth;
    6. canvas.height = this.naturalHeight;

    }

参考资料

  • CanvasRenderingContext2D.drawImage() - Web API 接口参考 | MDN

感谢阅读，欢迎评论^-^

打赏我吧^-^

发表评论

表情：
评论列表 （有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读