캔버스는 슬라이더에 따라 사진을 확대 및 축소하는 효과를 구현합니다.
- 高洛峰원래의
- 2017-02-25 16:08:341879검색
이번 글은 캔버스가 슬라이더에 따라 어떻게 사진 확대/축소 효과를 구현할 수 있는지에 대한 예시를 주로 소개하고 있습니다. 아래 에디터와 함께 살펴보도록 하겠습니다. >
렌더링:
코드는 다음과 같습니다.
<!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>슬라이더에 따른 이미지 확대 및 축소 효과를 캔버스에 구현하기 위한 관련 기사를 더 보려면 다음을 참고하세요. PHP 중국어 웹사이트!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：캔버스는 다각형을 그립니다.다음 기사：캔버스는 다각형을 그립니다.