<!DOCTYPE
html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title</
title>
</
head>
<
body style="background:
black;">
<
canvas id="myCanvas" style="display:
block;border:
10px solid #aaa;margin:
0 auto;">
你的浏览器不支持canvas
</
canvas>
<
canvas id="watermarksCanvas" style="display:
none;border:
1px solid #aaa;margin:
0 auto;">
你的浏览器不支持canvas
</
canvas>
<
input type="range" id="scale_range" min="0.5" max="3.0" value="1.0" step="0.01" style="display:
block;margin:
20px auto;width:
800px;">
<
script>
var myCanvas = document.
getElementById(
"myCanvas")
;
var context = myCanvas.
getContext(
"2d")
;
var watermarksCanvas = document.
getElementById(
"watermarksCanvas")
;
var watermarksContext = watermarksCanvas.
getContext(
"2d")
;
var slider = document.
getElementById(
"scale_range")
;
var image = new Image()
;
window.
onload = function (){
myCanvas.
width = 300;
myCanvas.
height = 200;
var scale = slider.
value;
image.
src = '1.jpg';
image.
onload = function () {
// context.drawImage(image,750,750,200,200,0,0,800,800);
drawImageByScale(
scale)
;
slider.
onmousemove = function () {
scale = slider.
value;
drawImageByScale(
scale)
;
}
//watermarks
watermarksCanvas.
width = 100;
watermarksCanvas.
height = 50;
watermarksContext.
font = "bold 7px Arial";
watermarksContext.
lineWidth = "1";
watermarksContext.
fillStyle = "rgba(0,0,255,0.5)";
watermarksContext.
textBaseline = "middle";
watermarksContext.
fillText(
"==MyCanvas WaterMarks==",0,20)
;
}
function drawImageByScale(scale) {
var imageWidth = 300*scale
;
var imageHeight = 200*scale
;
// var sx = imageWidth / 2 - myCanvas.width / 2;
//var sy = imageHeight /2 - myCanvas.height / 2;
var dx = myCanvas.
width / 2 - imageWidth / 2;
var dy = myCanvas.
height /2 - imageHeight / 2;
context.
clearRect(
0,0,myCanvas.
width,myCanvas.
height)
;
context.
drawImage(
image,dx,dy,imageWidth,imageHeight)
;
context.
drawImage(
watermarksCanvas,myCanvas.
width - watermarksCanvas.
width,
myCanvas.
height - watermarksCanvas.
height)
;
// context.drawImage(image,sx,sy,myCanvas.width,myCanvas.height,0,0,myCanvas.width,myCanvas.height);
}
}
</
script>
</
body>
</
html>
转载请注明原文地址: https://www.6miu.com/read-61469.html
