效果如图
离屏canvas会占据一定内存，不过它们可以显著的提高绘图效率
代码如下
<!DOCTYPE html>
<html>
<head>
<title>图像与视频</title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0;margin: 0}
a{text-decoration: none}
img{border: none}
ul,ol{list-style: none}
br{font-size: 0;line-height: 0;clear: both}
body{text-align: center;background: rgba(100,145,250,0.3)}
canvas{border: 1px solid blue}
#scaleSlider{
vertical-align: 10px;
width: 100px;
margin-left: 90px;
}
#canvas{
margin:10px 20px 0px 20px;
border: thin solid #aaaaaa;
cursor:crosshair;
}
#controls{
margin-left: 15px;
padding: 0
}
#scaleOutput{
position: absolute;
width: 60px;
height: 30px;
margin-left: 10px;
vertical-align: center;
text-align:center;
color: blue;
font:18px Arial;
text-shadow: 2px 2px 4px rgba(100,140,250,0.8)
}
</style>
</head>
<body>
<div id="controls">
<output id="scaleOutput">1.0</output>
<input type="range" name="" id="scaleSlider" min="1" max="3.0" step="0.01" value="1.0">
</div>
<canvas id="canvas" id="canvas" width="454" height="512"></canvas>
</body>
</html>
<script type="text/javascript">
var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var offscreenCanvas=document.createElement("canvas") //创建离屏canvas
var offscreenContext=offscreenCanvas.getContext("2d")
offscreenCanvas.width=canvas.width
offscreenCanvas.height=canvas.height
var image=new Image()
var scaleSlider=document.getElementById("scaleSlider")
var scaleOutput=document.getElementById("scaleOutput")
//var scale=scaleSlider.value
var scale=1.0
var MINIMUM_SCALE=1.0
var MAXIMUN_SCALE=3.0
function drawScaled(){ //从离屏canvas复制过来图像并放大
var w=canvas.width;
var h=canvas.height;
var sw=w*scale;
var sh=h*scale;
context.drawImage(offscreenCanvas,0,0,offscreenCanvas.width,offscreenCanvas.height,-sw/2+w/2,-sh/2+h/2,sw,sh)
}
function drawScaleText(value){ //显示放大倍率
var text=parseFloat(value).toFixed(2)
scaleOutput.innerText=text
}
function drawWatermark(context){ //添加水印
var lineOne='Copyright'
var lineTwo='Acme Inc'
var textMetrics
var FONT_HEIGHT=128
context.save()
context.font=FONT_HEIGHT+"px Arial"
textMetrics=context.measureText(lineOne)
context.globalAlpha=0.6
context.fillStyle="cornflowerblue"
context.strokeStyle="yellow"
context.shadowColor='rgba(50,50,50,1.0)'
context.shaowOffsetX=5
context.translate(canvas.width/2,canvas.height/2-FONT_HEIGHT/2)
context.fillText(lineOne,-textMetrics.width/2,0)
context.strokeText(lineOne,-textMetrics.width/2,0)
textMetrics=context.measureText(lineTwo)
context.fillText(lineTwo,-textMetrics.width/2,FONT_HEIGHT)
context.strokeText(lineTwo,-textMetrics.width/2,FONT_HEIGHT)
context.restore()
}
scaleSlider.onchange=function(e)
scale=e.target.value
if (scale<MINIMUM_SCALE){scale=MINIMUM_SCALE}
else if(scale>MAXIMUN_SCALE){scale=MAXIMUN_SCALE}
drawScaled()
drawScaleText(scale)
}
image.src="./timg.jpg"
image.onload=function(){
context.drawImage(image,0,0,canvas.width,canvas.height)
offscreenContext.drawImage(canvas,0,0,canvas.width,canvas.height)
drawWatermark(context)
drawWatermark(offscreenContext)
drawScaleText(scale)
}
</script>
