html5 캔버스에서 이미지 전환을 구현하는 방법(코드)

이 글의 내용은 HTML5 캔버스에서 이미지 전환(코드)을 구현하는 방법에 대한 내용입니다. 참고할 만한 내용이 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

요즘 동적 배경을 만들기 위해 캔버스를 연구하던 중, 이것이 약간의 변화로 그림 전환 기능으로 변경될 수 있다는 것을 발견했습니다. img 태그의 src 속성의 동적 수정을 대체하여 그림을 얻을 수 있다는 것입니다. 타이밍 전환 기능. 첫 번째 코드는 다음과 같습니다.

function switchPic(containerId, pics, {
 speed = 1000,
 width = 100,
 height = 100,
 callback = function(pic) {}
} = {}) {
//判断
 if (!containerId || !pics) 
 throw new Error ("TypeError: switchPic--> 
  containerId or pics is undefined!");
 if(typeof containerId !== "string" || 
    {}.toString.call(pics) !== "[object Array]" )
 throw new Error ("TypeError: switchPic--> 
  containerId is not string or pics is not array!");
 //制作canvas
 let canvas = document.createElement("canvas");
 canvas.width = width;
 canvas.height = height;
 canvas.style.cursor = "pointer";
 //放入canvas
 document.querySelector("#" + containerId).appendChild(canvas);
 ctx = canvas.getContext("2d");
 let img = new Image(),
     timer = null,
     i = 1,
     change = function() {
       img.src = pics[i - 1];
       img.onload = function() {
         ctx.clearRect(0, 0, width, width);
//动态背景图这里可能需要修改，如果帧图都在一张图片中，这就需要裁剪显示，再多几个参数了
         ctx.drawImage(img, 0, 0, width, width);
         i++;
         if(i > pics.length) i = 1;
/*这里动态背景图是动画效果，所以用requestAnimationFrame比计时器更好；
  而且切换图片显示需要速度控制，所以计时器适用；
*/
         timer = setTimeout(change, speed);
        }
      };
 timer = setTimeout(change, speed);
 canvas.addEventListener("mouseenter", function() {
   canvas.title = img.src;
   clearTimeout(timer);
 })
 canvas.addEventListener("mouseleave", function() {
   timer = setTimeout(change, speed);
 })
 canvas.addEventListener("click", function(event) {
   callback.call(this, img.src);
 })
}

코드 설명:

1. 매개변수 ContainerId는 캔버스를 보유하는 컨테이너 ID이고, Pictures는 그림 소스의 배열입니다. 이 두 가지는 필수입니다. {speed = 1000, width = 100, height = 100, callback = function(pic) {} } 이것은 이름, 전환 속도, 캔버스의 너비 및 높이를 보면 그것이 수행하는 작업을 알 수 있습니다(표시된 그림이 설정됨). 여기서는 동일한 크기로 설정해야 하므로 흐려지지 않도록 사진의 픽셀 크기에 따라 설정해 보세요.) 콜백 함수는 현재 사진을 클릭하면 수행되는 작업입니다. 매개변수는 현재 사진의 src 주소입니다.

2. 코드는 비교적 간단합니다. 청취 이벤트를 추가하면 마우스가 안으로 움직일 때 전환이 중지되고, 계속 전환됩니다. 그런 다음 클릭하여 콜백 기능을 활성화합니다.

3. img 태그 src 전환 버전과의 차이점을 설명하세요. 우선, img src 스위치를 사용하면 과도한 다중 다시 그리기가 발생하지 않으며 브라우저가 다시 그려집니다. F12는 직접 기록하지만 캔버스를 사용하면 다시 그려지지 않습니다. 두 번째로 img 태그는 전환 스타일, 페이드 인 및 아웃 등을 설정할 수 있습니다. 상대적으로 쉽지만 캔버스 버전은 더 복잡하며 캔버스 기술이 필요합니다. .

위 내용은 html5 캔버스에서 이미지 전환을 구현하는 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!