canvas中可以繪制圖像，可分為三種參數(shù)形式

1. 第一種參數(shù)形式：

ctx.drawImage(image, x, y);
參數(shù)：

image: 規(guī)定要使用的圖像，畫布或者視頻，
x : 在畫布上放置圖像的x軸坐標位置
y： 在畫布上方式圖像的y軸坐標位置

var ctx = document.getElementById('draw').getContext('2d');

var img = new Image();

img.src = './1.jpg';

img.onload = function () {
    // 圖像加載完成 ，繪制畫布中
    ctx.drawImage(img, 50, 50);
}

2. 第二種參數(shù)形式：

ctx.drawImage(image, x, y, w, h)
參數(shù)：

image: 規(guī)定要使用的圖像，畫布或者視頻，
x : 在畫布上放置圖像的x軸坐標位置
y： 在畫布上方式圖像的y軸坐標位置
w：使用圖像的寬度
h: 使用圖像的高度

img.onload = function () {
    ctx.drawImage(img, 50, 50, 100, 100);
}

3. 第三種參數(shù)形式

ctx.drawImage(image, sourceX, sourceY, sourceW, sourceH, x, y, w, h)
參數(shù)：

image: 規(guī)定要使用的圖像，畫布或者視頻，
sourceX：源圖像上的裁切x坐標位置
sourceY：源圖像上的裁切Y坐標位
sourceW：源圖像上的裁切的寬度
sourceH：源圖像上的裁切高度
x : 在畫布上放置圖像的x軸坐標位置
y： 在畫布上方式圖像的y軸坐標位置
w：使用圖像的寬度
h: 使用圖像的高度

drawImage.gif

來一個栗子
繪制圖像實現(xiàn)放大及縮小功能

zoom.gif

實現(xiàn)原理：

圖片比例.jpg

繪制圖像的原點(x, y),起到了關(guān)鍵作用
1.當圖像大于canvas的情況下，那么坐標則會在畫布外部
2.當圖像小于canvas的情況下，坐標則會在畫布內(nèi)部
3.為了圖像居中，那么圖像的寬度與canvas寬度、圖像的高度與canvas高度、必須是保持居中狀態(tài)，那么坐標(x, y)的其實就是他們之差除于2

HTML

 <input type="range" name="point" min="0.2" max="2" step="0.2" value="1"/>
 <canvas id="draw" width="345" height="310" style="border:1px solid #CCC"></canvas>

JS

var canvas = document.getElementById('draw');
var ctx = canvas.getContext('2d');

var point = document.querySelector('input[name=point]');

var img = new Image();

img.src = './1.jpg';

// 圖片加載完成后設(shè)置初始值
img.onload = function () {
    drawImg(.5);
}

// 獲取滑塊控件的value
point.oninput = function () {
    drawImg(this.value);
}

function drawImg(scale) {
// 清除畫布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 設(shè)置圖片顯示大小
    var imgWidth = 345 * scale;
    var imgHeight = 310 * scale;

    // 圖片在canvas中的坐標
    var cx = (canvas.width - imgWidth) / 2;
    var cy = (canvas.height - imgHeight) / 2;

    ctx.drawImage(img, cx, cy, imgWidth, imgHeight);
}

再來一個栗子： 水印效果
每一張圖片都會在右下角或者左下角附上出處，那么canvas的drawImage也會實現(xiàn)這樣的效果，我們可以使用drawImage將另一張畫布作為水印貼在某一張畫布上，當用戶保存畫布的時候，那么圖片會帶上咱們的水印

下載 (1).png

var canvas = document.createElement('canvas');

canvas.width = 300;
canvas.height = 300;

canvas.style.border = '1px solid #ccc';

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

var img = new Image();
img.src = './bug.jpg';
img.onload = function () {
    ctx.drawImage(img, -30, -20);
    // 使用水印
    ctx.drawImage(warterMarkText('水?。贺惓探逃齘0^', 20, 'pink'), 100, 270);
}

// 水印部分
/**
 * 
 * @param {*} text 文字內(nèi)容
 * @param {*} fontSize 文字大小
 * @param {*} color 文字顏色
 */
function warterMarkText(text, fontSize, color) {
    // 創(chuàng)建canvas
    var waterMarkCan = document.createElement('canvas');
    var waterMarkCtx = waterMarkCan.getContext('2d');

    // 設(shè)置字體大小
    waterMarkCtx.font = fontSize + 'px bold';

// 字體度量值設(shè)置為canvas的寬度 使用了canvas中文字度量方法，可以計算出文字真實所在大小
    var maxWidth = waterMarkCtx.measureText(text).width;
    waterMarkCan.width = maxWidth;
    // canvas高度補個差 5
    waterMarkCan.height = fontSize + 5;
    // waterMarkCtx.fillRect(0, 0, waterMarkCan.width, waterMarkCan.height);

    // 重置大小
    waterMarkCtx.font = fontSize + 'px bold';
    waterMarkCtx.textAlign = 'center';
    waterMarkCtx.textBaseline = 'middle';
    waterMarkCtx.fillStyle = color;
    waterMarkCtx.fillText(text, maxWidth / 2, fontSize / 2 + 5);
    return waterMarkCan;
}