Метод clip() в холсте используется для вырезания произвольных форм и размеров из исходного холста. Как только область будет обрезана, все последующие рисунки будут ограничены этой областью (доступ к другим областям на холсте будет невозможен).
Вы также можете сохранить текущую область холста, используя метод save() перед использованием метода clip(), и восстановить ее в любое время в будущем с помощью метода восстановления().
Затем используйте метод clip() для достижения эффекта прожектора.
</iframe><button id=btn>Преобразовать</button><button id=con>Пауза</button><canvas id=canvas width=400 height=290 style=border:1px сплошной черный>Текущий браузер не поддерживает поддержите его Canvas, смените браузер и повторите попытку</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume';clearInterval(oTimer); }else{ this.innerHTML = 'pause'; oTimer = setInterval(fnInterval,50); document.getElementById('canvas'); //Ширина и высота холста хранилища var H=290,W=400 //Прожектор хранилища var ball = {}; //Хранение фотографий var IMG; //Адрес хранения фотографий var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = Canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); = Math.floor(Math.random()*(W-tempR) + tempR = Math.floor(Math.random()*(H-tempR) + tempR) ball = { x:tempX, y: tempY, r:tempR, StepX:Math.floor(Math.random() * 21 -10), StepY:Math.floor(Math.random() * 21) -10) }; IMG = document.createElement('img'); IMG.src=URL; IMG.onload = function(){ cxt.drawImage(IMG,0,0 }//Добро пожаловать в полно- обмен разработкой стека Учитесь и общайтесь вместе в кругу: 582735936 ]//Для 1-3 фронтенд-персонала} //Помогаем преодолеть технические узкие места и улучшить навыки мышления} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY;umpTest(ball);} functionumpTest(ele){ //левая сторона if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX; } //Правая сторона if(ele.x >= W - ele.r) { ele.x = W - ele.stepX = -ele.stepX } //Верхняя сторона if(ele.y <= ele.r){ ele.y = ele.stepY = -ele.stepY } //Нижняя сторона if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Сбрасываем высоту холста, чтобы добиться эффекта очистки холста Canvas.height = H; if(canvas.getContext){ var cxt = Canvas.getContext('2d'); cxt.save(); //Затемняем фон холста cxt.beginPath(); cxt.fillStyle = '#000'; 0,0,W,H); //Рендеринг прожектора cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.clip(); //Из-за использование Без clip() фоновое изображение холста появится в области clip() cxt.drawImage(IMG,0,0); }//Приглашаем вас присоединиться к кругу обмена опытом разработки полного стека, чтобы учиться и общаться вместе: 582735936 ]//Для 1-3 сотрудников фронтенда} //Помогаем преодолеть технические узкие места и улучшить навыки мышления}} Initial();clearInterval (oTimer); function fnInterval( ){ //Обновление статуса движения update(); //Рендеринг(); } var oTimer = setInterval(fnInterval,50);Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.