canvas——绘制图片

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 画布中的一个矩形区域

例子:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>

你可能感兴趣的:(canvas——绘制图片)