柠檬铺

立即咨询

柠檬铺

千呼万唤 HTML 5 (11) - 画布（canvas）之效果（下）

6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html

双击代码全选

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

<!DOCTYPE HTML>

<html>

<head>

<title>全局 Alpha</title>

</head>

<body>

<canvasid="canvas"width="140"height="140"style="background-color: rgb(222, 222, 222)">

您的浏览器不支持 canvas 标签

</canvas>

<br/>

<buttontype="button"onclick="drawIt();">Demo</button>

<buttontype="button"onclick="clearIt();">清除画布</button>

   

<scripttype="text/javascript">

   

var ctx = document.getElementById('canvas').getContext('2d');

   

function drawIt() {

   

clearIt();

   

/*

* context.globalAlpha - 设置全局的 alpha 值

*/

ctx.globalAlpha = "0.5";

   

ctx.fillStyle = "red";

ctx.beginPath();

ctx.rect(20, 20, 100, 100);

ctx.fill();

}

   

function clearIt() {

ctx.clearRect(0, 0, 140, 140);

}

   

</script>

</body>

</html>

 

7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html

双击代码全选

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

<!DOCTYPE HTML>

<html>

<head>

<title>新颜色与画布当前已有颜色的合成方式</title>

</head>

<body>

<divid="msg"></div>

   

<canvasid="canvas"width="200"height="200"style="background-color: rgb(222, 222, 222)">

您的浏览器不支持 canvas 标签

</canvas>

<br/>

<buttontype="button"onclick="drawIt();">改变 globalCompositeOperation</button>

<buttontype="button"onclick="clearIt();">清除画布</button>

   

<scripttype="text/javascript">

   

var ctx = document.getElementById('canvas').getContext('2d');

   

var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor'];

var index = 0;

   

function drawIt() {

   

clearIt();

   

ctx.fillStyle = "red";

ctx.beginPath();

ctx.rect(20, 20, 100, 100);

ctx.fill();

   

/*

* context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式

*   source-atop - 保留已有颜色，然后绘制新颜色与已有颜色重合的部分

*   source-in - 绘制新颜色与已有颜色重合的部分，其余全透明

*   source-out - 绘制新颜色与已有颜色不重合的部分，其余全透明

*   source-over - 在已有颜色的前面绘制新颜色。默认值

*   destination-atop - 在已有颜色的后面绘制新颜色，然后保留已有颜色与新颜色重合的部分

*   destination-in - 保留已有颜色与新颜色重合的部分，其余全透明

*   destination-out - 保留已有颜色与新颜色不重合的部分，其余全透明

*   destination-over - 在已有颜色的后面绘制新颜色

*   lighter - 混合重叠部分的颜色

*   copy - 删除已有颜色，只绘制新颜色

*   xor - 透明化重叠部分的颜色

*/

ctx.globalCompositeOperation = compositeOperationTypes[index];

document.getElementById("msg").innerHTML = ctx.globalCompositeOperation;

   

ctx.fillStyle = "blue";

ctx.beginPath();

ctx.rect(80, 80, 100, 100);

ctx.fill();

   

index++;

if (index >= compositeOperationTypes.length)

index = 0;

}

   

function clearIt() {

ctx.clearRect(0, 0, 200, 200);

   

// source-over 是 context.globalCompositeOperation 的默认值

ctx.globalCompositeOperation = "source-over";

}

   

</script>

</body>

</html>

 

8、保存画布上下文，以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html

双击代码全选

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

<!DOCTYPE HTML>

<html>

<head>

<title>保存画布上下文，以及恢复画布上下文</title>

</head>

<body>

<div>单击“save and draw”一次，然后单击“restore and draw”三次</div>

   

<canvasid="canvas"width="280"height="140"style="background-color: rgb(222, 222, 222)">

您的浏览器不支持 canvas 标签

</canvas>

<br/>

<buttontype="button"onclick="drawIt();">save and draw</button>

<buttontype="button"onclick="restoreIt();">restore and draw</button>

   

<scripttype="text/javascript">

   

var ctx = document.getElementById('canvas').getContext('2d');

   

/*

* save() - 将画布的上下文压入堆栈

* restore() - 从堆栈中取一个画布的上下文，如果没有则什么都不做

*/

   

function drawIt() {

clearIt();

   

ctx.strokeStyle = "red";

ctx.fillStyle = "green";

ctx.lineWidth = 5;

ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有一个画布上下文

   

drawRect1();

   

ctx.strokeStyle = "blue";

ctx.fillStyle = "yellow";

ctx.lineWidth = 10;

ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有两个画布上下文

   

drawRect2();

}

   

function restoreIt() {

clearIt();

   

ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文，如果取不到则什么都不做

   

drawRect1();

drawRect2();

}

   

function drawRect1() {

ctx.beginPath();

ctx.rect(20, 20, 100, 100);

ctx.stroke();

ctx.fill();

}

   

function drawRect2() {

ctx.beginPath();

ctx.rect(140, 20, 100, 100);

ctx.stroke();

ctx.fill();

}

   

function clearIt() {

ctx.clearRect(0, 0, 280, 140);

   

ctx.strokeStyle = "black";

ctx.fillStyle = "black";

ctx.lineWidth = 1;

}

</script>

</body>

</html>

 

9、像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
canvas/effect/imageData.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now