效果图

html结构

Canvas

body{

background-color: #000;

}

#canvas{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}

.range-style{

display: block;

margin: 20px auto;

width: 800px;

}

.watermark-canvas-style{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}

js脚本

var canvas = document.getElementById("canvas");

var slider = document.getElementById("scale-range");

var watermarkCanvas = document.getElementById("watermark-canvas");

var context = canvas.getContext("2d");

var watermarkContext = watermarkCanvas.getContext("2d");

var image = new Image();

window.onload = function(){

canvas.width = 600;

canvas.height = 450;

var scale = slider.value;

console.log(scale);

image.src = "20170122161717.png";

image.onload = function(){

// context.drawImage(image,0,0,canvas.width,canvas.height);

drawImageByScale(scale);

slider. = function(){

scale = slider.value;

drawImageByScale(scale);

}

}

watermarkCanvas.width = 500;

watermarkCanvas.height = 100;

watermarkContext.font = "bold 50px Arial";

watermarkContext.fillStyle = "rgba(255,255,255,0.5)";

watermarkContext.textBaseline = "middle";

watermarkContext.fillText("%:)%yunshuo%:)%",20,50);

}

function drawImageByScale(scale){

var imageWidth = 600 * scale;

var imageHeight = 450 * scale;

// var sx = imageWidth / 2 - canvas.width / 2;

// var sy = imageHeight / 2 - canvas.height / 2;

// context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);

var dx = canvas.width / 2 - imageWidth / 2;

var dy = canvas.height / 2 - imageHeight / 2;

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(image,dx,dy,imageWidth,imageHeight);

context.drawImage(watermarkCanvas,canvas.width - watermarkCanvas.width,canvas.height - watermarkCanvas.height);

}