In diesem Artikel wird hauptsächlich das Beispiel der Leinwand vorgestellt, um den Effekt des Vergrößerns und Verkleinerns von Bildern gemäß dem Schieberegler zu erzielen. Schauen wir uns das mit dem Editor an.
Rendering:
Bild (1) Originalbild
Bild (2) Verkleinern nach
Bild (3) Nach dem Vergrößern
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas1{
box-shadow: 3px 3px 10px black;
}
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<input type="range" name="slider" id="silder" value="0.5" max="1" min="0" step="0.01"/>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var slider = document.getElementById("silder");
var scale = slider.value;
creatImg(scale);
slider.onmousedown = function() {
slider.onmousemove = function () {
scale = slider.value;
creatImg(scale);
}
}
function creatImg (scale) {
var myImg = new Image();
myImg.src = "https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/902397dda144ad34ac75c376d7a20cf430ad857d.jpg"
var imgh = canvas.height * scale;
var imgw = canvas.width * scale;
var x = canvas.width / 2 - imgw / 2;
var y = canvas.height / 2 - imgh / 2
myImg.onload = function () {
context.clearRect(0 , 0 , canvas.width , canvas.height);
context.drawImage(myImg , x , y ,imgw , imgh)
}
}
</script>
</html>Für weitere verwandte Artikel auf Leinwand, um den Bildvergrößerungs- und Verkleinerungseffekt basierend auf dem Schieberegler zu realisieren, achten Sie bitte darauf zur chinesischen PHP-Website!
So lösen Sie das Problem, dass MySQL Link 10060 meldet
So lösen Sie eine verstümmelte HTML-Seite
Was soll ich tun, wenn das übereinstimmende Ergebnis der Vlookup-Funktion N/A lautet?
Taobao passwortfreie Zahlung
Was sind private Clouds?
Was ist die normale Temperatur eines Laptops?
So verwenden Sie HTML für die Webnavigation
So öffnen Sie eine Datei im CSV-Format
