<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>canvas</title>
<style>
*{margin: 0; padding: 0;}
</style>
</head>
<body style="background: #000;">
<canvas id="canvas" width="" height="" style="display: block; margin: 0 auto; border: 1px solid #ddd;">
您的浏览器尚不支持canvas
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display: block; margin: 20px auto; width: 800px;" />
<canvas id="watermark-canvas" width="" height="" style="display:none; margin: 0 auto; border: 1px solid #ddd;">
您的浏览器尚不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
var slider=document.getElementById('scale-range');
var image=new Image();
var watermarkCanvas=document.getElementById('watermark-canvas');
var watermarkContext=watermarkCanvas.getContext('2d');
window.οnlοad=function(){
canvas.width=1024
canvas.height=683
var scale=slider.value
image.src="lg-1.jpg"
image.οnlοad=function(){
drawImageByScale(scale)
slider.οnmοusemοve=function(){
scale=slider.value
drawImageByScale(scale)
}
}
}
function drawImageByScale(scale){
var imageWidth=1024*scale
var imageHeight=683*scale
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>
</body>
</html>
6751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
