> 웹 프론트엔드 > JS 튜토리얼 > 캔버스는 서치라이트 효과를 얻습니다.

캔버스는 서치라이트 효과를 얻습니다.

高洛峰
풀어 주다: 2017-02-08 15:18:12
원래의
1576명이 탐색했습니다.

이 글에서는 서치라이트 효과를 얻기 위해 클립() 메소드를 사용하는 예를 소개합니다.

클립() 메소드를 살펴보겠습니다. 캔버스는 원본 캔버스에서 원하는 모양과 크기를 잘라내는 데 사용됩니다. 한 영역이 잘리면 이후의 모든 그림은 잘린 영역으로 제한됩니다(캔버스의 다른 영역에는 접근할 수 없습니다)

clip() 메서드를 사용하기 전에 저장을 사용할 수도 있습니다. () 메서드는 현재 그림을 저장합니다. 복원() 메소드를 통해 캔버스 영역을 복원하고 나중에 언제든지 복원

다음으로, 클립() 메소드를 사용하여 서치라이트 효과를 얻습니다

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

<button id="btn">变换</button>

<button id="con">暂停</button>

<canvas id="canvas" width="400" height="290" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>

<script>

btn.onclick = function(){history.go();}

con.onclick = function(){

 if(this.innerHTML == &#39;暂停&#39;){

  this.innerHTML = &#39;恢复&#39;;

  clearInterval(oTimer);

 }else{

  this.innerHTML = &#39;暂停&#39;;

  oTimer = setInterval(fnInterval,50);

 }

}

var canvas = document.getElementById(&#39;canvas&#39;);

//存储画布宽高

var H=290,W=400;

//存储探照灯

var ball = {};

//存储照片

var IMG;

//存储照片地址

var URL = &#39;http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg&#39;;

function initial(){

 if(canvas.getContext){

  var cxt = canvas.getContext(&#39;2d&#39;);

  var tempR = Math.floor(Math.random()*30+20);

  var tempX = Math.floor(Math.random()*(W-tempR) + tempR);

  var tempY = 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(&#39;img&#39;);

  IMG.src=URL;

  IMG.onload = function(){

   cxt.drawImage(IMG,0,0);

  }

 }

}

function update(){

 ball.x += ball.stepX;

 ball.y += ball.stepY;

 bumpTest(ball);

}

function bumpTest(ele){

 //左侧

 if(ele.x <= ele.r){

  ele.x = ele.r;

  ele.stepX = -ele.stepX;

 }

 //右侧

 if(ele.x >= W - ele.r){

  ele.x = W - ele.r;

  ele.stepX = -ele.stepX;

 }

 //上侧

 if(ele.y <= ele.r){

  ele.y = ele.r;

  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(&#39;2d&#39;);

  cxt.save();

  //将画布背景涂黑

  cxt.beginPath();

  cxt.fillStyle = &#39;#000&#39;;

  cxt.fillRect(0,0,W,H);

  //渲染探照灯

  cxt.beginPath();

  cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);

  cxt.fillStyle = &#39;#000&#39;;

  cxt.fill();

  cxt.clip(); 

  //由于使用了clip(),画布背景图片会出现在clip()区域内

  cxt.drawImage(IMG,0,0);

  cxt.restore();

 }

}

initial();

clearInterval(oTimer);

function fnInterval(){

 //更新运动状态

 update();

 //渲染

 render();

}

var oTimer = setInterval(fnInterval,50);

</script>

로그인 후 복사

서치라이트 효과를 구현하는 캔버스에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿