canvas-绘制图像

canvas中可以绘制图像，可分为三种参数形式

1. 第一种参数形式：

ctx.drawImage(image, x, y);
参数：

image: 规定要使用的图像，画布或者视频，
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. 第二种参数形式：

ctx.drawImage(image, x, y, w, h)
参数：

image: 规定要使用的图像，画布或者视频，
x : 在画布上放置图像的x轴坐标位置
y： 在画布上方式图像的y轴坐标位置
w：使用图像的宽度
h: 使用图像的高度

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

3. 第三种参数形式

ctx.drawImage(image, sourceX, sourceY, sourceW, sourceH, x, y, w, h)
参数：

image: 规定要使用的图像，画布或者视频，
sourceX：源图像上的裁切x坐标位置
sourceY：源图像上的裁切Y坐标位
sourceW：源图像上的裁切的宽度
sourceH：源图像上的裁切高度
x : 在画布上放置图像的x轴坐标位置
y： 在画布上方式图像的y轴坐标位置
w：使用图像的宽度
h: 使用图像的高度

drawImage.gif

来一个栗子
绘制图像实现放大及缩小功能

zoom.gif

实现原理：

图片比例.jpg

绘制图像的原点(x, y),起到了关键作用
1.当图像大于canvas的情况下，那么坐标则会在画布外部
2.当图像小于canvas的情况下，坐标则会在画布内部
3.为了图像居中，那么图像的宽度与canvas宽度、图像的高度与canvas高度、必须是保持居中状态，那么坐标(x, y)的其实就是他们之差除于2

HTML

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';

// 图片加载完成后设置初始值
img.onload = function () {
    drawImg(.5);
}

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

function drawImg(scale) {
// 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 设置图片显示大小
    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也会实现这样的效果，我们可以使用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 文字内容
 * @param {*} fontSize 文字大小
 * @param {*} color 文字颜色
 */
function warterMarkText(text, fontSize, color) {
    // 创建canvas
    var waterMarkCan = document.createElement('canvas');
    var waterMarkCtx = waterMarkCan.getContext('2d');

    // 设置字体大小
    waterMarkCtx.font = fontSize + 'px bold';

// 字体度量值设置为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;
}