效果图
html结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Canvas</title>
<link rel="stylesheet" href="">
<style>
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;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="range" class="range-style" id="scale-range" min="0.5" max="3.0" step = "0.01" value="0.5">
<canvas id="watermark-canvas" class="watermark-canvas-style"></canvas>
</body>
</html>
js脚本
<script>
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);
}
</script>