canvas 绘制图片 下载图片 dashLine

       


/**
 * 在canvas上画img
 * @param ctx
 * @param image
 * @param x
 * @param y
 * @param alpha
 */
function drawImage(ctx, image, x, y, alpha) {
    // 绘制图片
    ctx.drawImage(image, x, y);
    ctx.stroke();
    // 获取从x、y开始，宽为image.width、高为image.height的图片数据
    // 也就是获取绘制的图片数据
    let imgData = ctx.getImageData(x, y, image.width, image.height);
    for (let i = 0, len = imgData.data.length; i < len; i += 4) {
        // 改变每个像素的透明度
        imgData.data[i + 3] = imgData.data[i + 3] * alpha;
    }
    // 将获取的图片数据放到指定的位置
    ctx.putImageData(imgData, x, y);
}

/**
 * 下载img
 * @param url
 * @param name
 */
function downLoadCanvasImg(url, name) {
    let oA = document.createElement("a");
    oA.download = name + ".png";// 设置下载的文件名，默认是'下载'
    oA.href = url;
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); //下载之后把创建的元素删除
}

/**
 * canvas 绘制虚线
 * @param ctx
 * @param moveTo
 * @param lineTo
 * @param pattern
 */
function drawDashedLine(ctx, moveTo, lineTo, pattern) {
    ctx.beginPath();
    ctx.setLineDash(pattern);
    ctx.moveTo(moveTo.x, moveTo.y);
    ctx.lineTo(lineTo.x, lineTo.y);
    ctx.stroke();
    ctx.closePath();
    ctx.setLineDash([]);
}