Cet article présente principalement l'exemple de la façon dont Canvas peut réaliser l'effet de zoom avant et arrière sur les images en fonction du curseur. Il a une bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous
Rendu :
Photo (1) Photo originale
Image (2) Zoom arrière après
Image (3) Après zoom avant
le code est le suivant :
<!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>
Liste des dix meilleures applications logicielles de trading de devises
Quelle est la différence entre les téléphones mobiles 4g et 5g ?
commande de recherche de fichier Linux
Touches de raccourci de l'écran de verrouillage Windows
Comment ouvrir des fichiers HTML sur un téléphone mobile
Méthode de réparation des erreurs Kernelutil.dll
Raisons pour lesquelles le chargement du CSS a échoué
que signifie l'interface USB
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
