柠檬铺

立即咨询

柠檬铺

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

介绍
HTML 5: 画布（canvas）之效果

  • 填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
  • 剪裁 | clip()
  • 渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
  • 贴图的平铺模式 | createPattern()
  • 阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
  • 全局 Alpha | globalAlpha
  • 新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
  • 保存画布上下文，以及恢复画布上下文 | save(), restore()
  • 像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray

示例
1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.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

<!DOCTYPE HTML>

<html>

<head>

    <title>填充色, 笔划色, 颜色值</title>

</head>

<body>

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

        您的浏览器不支持 canvas 标签

    </canvas>

    <br />

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

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

    

    <script type="text/javascript">

    

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

    

        function drawIt() {

    

            clearIt();

    

            /*

             * context.fillStyle - 指定填充色的颜色值

             *

             * context.strokeStyle - 指定笔划色的颜色值

             *

             * 颜色值示例如下：

             *   Color Name - "green"

             *   #rgb - "#0f0"

             *   #rrggbb = "#00ff00"

             *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)

             *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)

             *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)

             *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)

             */

    

            ctx.fillStyle = 'Red';

            ctx.strokeStyle = 'Green';

            ctx.lineWidth = 10;

    

            // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例，以及先 stroke 再 fill 和先 fill 再 stroke 的区别

            ctx.beginPath();

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

            ctx.stroke();

            ctx.fill();

    

            ctx.beginPath();

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

            ctx.fill();

            ctx.stroke();

        }

    

        function clearIt() {

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

        }

    

    </script>

</body>

</html>

 

2、剪裁 | clip()
canvas/effect/clip.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

<!DOCTYPE HTML>

<html>

<head>

    <title>剪裁</title>

</head>

<body>

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

        您的浏览器不支持 canvas 标签

    </canvas>

    <br />

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

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

    

    <script type="text/javascript">

    

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

    

        function drawIt() {

    

            clearIt();

    

            var img = new Image();

    

            img.onload = function () {

                ctx.drawImage(img, 0, 0, 512, 512);

            }

    

            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";

            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";

    

            /*

             * context.clip() - 只显示当前路径所包围的剪切区域

             */

            ctx.beginPath();

            ctx.arc(256, 256, 100, 0, Math.PI * 2, true);

            ctx.clip();

        }

    

        function clearIt() {

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

        }

    

    </script>

</body>

</html>

 

3、渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
canvas/effect/gradient.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

<!DOCTYPE HTML>

<html>

<head>

    <title>渐变色</title>

</head>

<body>

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

        您的浏览器不支持 canvas 标签

    </canvas>

    <br />

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

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

    

    <script type="text/javascript">

    

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

    

        function drawIt() {

    

            clearIt();

    

            /*

             * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象

             *   xStart, yStart - 线性渐变对象的起始点坐标

             *   xEnd, yEnd - 线性渐变对象的结束点坐标

             *

             * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点

             *   offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1

             *   color - 渐变参考点的颜色值 

             */

            var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);

            linearGradient.addColorStop(0, "red");

            linearGradient.addColorStop(0.5, "green");

            linearGradient.addColorStop(1, "blue");

    

            ctx.beginPath();

            ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);

            ctx.fillStyle = linearGradient;

            ctx.fill();

    

    

            /*

             * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient 

             *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标

             *   radiusStart - 开始圆的半径

             *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标

             *   radiusEnd - 结束圆的半径

             */

            var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);

            radialGradient.addColorStop(0, "red");

            radialGradient.addColorStop(0.5, "green");

            radialGradient.addColorStop(1, "blue");

    

            ctx.beginPath();

            ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);

            ctx.fillStyle = radialGradient;

            ctx.fill();

        }

    

        function clearIt() {

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

        }

    

    </script>

</body>

</html>

 

4、贴图的平铺模式 | createPattern()
canvas/effect/pattern.html

发表回复

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

Grow your business fast with

Suku

Subscribe Now