canvas——绘制图片

最新推荐文章于 2024-07-08 11:19:04 发布

滑稽之霸

最新推荐文章于 2024-07-08 11:19:04 发布

阅读量653

点赞数

文章标签：前端 h5 canvas

本文链接：https://blog.youkuaiyun.com/qq_42926749/article/details/82630135

版权

canvas作为画布也能将图片画出来，语法如下：

drawImage()
- 三个参数drawImage(img,x,y)
- img 图片对象、canvas对象、video对象
- x,y 图片绘制的左上角
- 五个参数drawImage(img,x,y,w,h)
- img 图片对象、canvas对象、video对象
- x,y 图片绘制的左上角
- w,h 图片绘制尺寸设置(图片缩放，不是截取)
- 九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img 图片对象、canvas对象、video对象
- x,y,w,h 图片中的一个矩形区域
- x1,y1,w1,h1 画布中的一个矩形区域

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600" height="400" style="border: 1px solid #ccc"></canvas>
</body>
</html>
<script>
    var ctx = document.querySelector('canvas').getContext('2d');

    var image = new Image();

    //怎么知道图片完成
    image.onload = function () {
        //如果这个图片缓存过了，加载速度肯定非常快，并不需要绑定onload事件
        //所以先绑定，再加载
        //用法一：三个参数
        //ctx.drawImage(image,100,100);
        //用法二：五个参数
        //ctx.drawImage(image,100,100,50,50);
        //用法三：九个参数
        //第一组坐标 是图片上定位的坐标
        //第二组坐标 是图片上截取的区域大小
        //第三组坐标 是绘制在画布上的坐标
        //第四组坐标 是图片的大小
        ctx.drawImage(image,100,100,100,100,100,100,100,100);
    }
    image.src = 'image/01.jpg';
</script>