柠檬铺

立即咨询

柠檬铺

千呼万唤 HTML 5 (8) - 画布（canvas）之绘制图形

介绍
HTML 5: 画布（canvas）之绘制图形

  • 画布 Demo - 画布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
  • 在画布上绘制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
  • 在画布上绘制弧线（以路径的方式）- beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
  • 在画布上绘制曲线（以路径的方式）- quadraticCurveTo(), bezierCurveTo()
  • 在画布上绘制直线（以路径的方式）- lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()
  • 在画布上绘制矩形（以路径的方式）- rect()

示例
1、画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.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

<!DOCTYPE HTML>

<html>

<head>

    <title>画布 Demo</title>

</head>

<body>

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

        您的浏览器不支持 canvas 标签

    </canvas>

    <br/>

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

    

    <br />

    <img id="img" alt="" src="" />

    

    <script type="text/javascript">

    

        var canvas = document.getElementById('canvas')

        if (canvas.getContext) {

            alert("您的浏览器支持 canvas 标签");

        } else {

            alert("您的浏览器不支持 canvas 标签");

        }

    

        /*

         * canvas 标签 - 画布标签

         *   getContext("2d") - 获取画布标签上的 2D 上下文对象（CanvasRenderingContext2D 对象）

         *   width - 画布的宽

         *   height - 画布的高

         *   canvas.toDataURL(type) - 返回画布数据，默认类型为 image/png

         *     type - 指定返回画布数据的类型，比如可以指定为 image/jpeg，默认类型为 image/png

         *

         * CanvasRenderingContext2D - 画布的 2D 上下文对象，其拥有多种绘制图像的方法

         *   canvas - 上下文所对应的画布

         */

    

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

        alert(ctx.canvas.id);

    

        function demo() {

    

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

    

            alert("width: " + canvas.width.toString());

            alert("height: " + canvas.height.toString());

    

            alert(canvas.toDataURL("image/jpeg"));

            alert(canvas.toDataURL()); // image/png

            document.getElementById("img").src = canvas.toDataURL();

    

        }

    

    </script>

</body>

</html>

 

2、绘制矩形 | canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
canvas/shape/rectangle.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

76

77

78

79

80

81

82

83

84

85

86

87

88

<!DOCTYPE HTML>

<html>

<head>

    <title>在 canvas 上绘制矩形的 demo</title>

</head>

<body>

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

        您的浏览器不支持 canvas 标签

    </canvas>

    <br/>

    <button type="button" onclick="drawIt();">在画布上绘制一些矩形</button>

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

    

    <script type="text/javascript">

    

        var canvas = document.getElementById('canvas')

        if (canvas.getContext) {

            alert("您的浏览器支持 canvas 标签");

        } else {

            alert("您的浏览器不支持 canvas 标签");

        }

    

        /*

         * canvas.getContext("2d") - 获取画布标签上的 2D 上下文对象（HTML DOM CanvasRenderingContext2D 对象），其拥有多种绘制图像的方法。

         */

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

    

        function drawIt() {

    

            clearIt();

    

            /*

             * context.fillRect(x, y, w, h) - 绘制一个有填充色的矩形，默认填充色为 0x000000

             *   x - 矩形左上角的 x 坐标

             *   y - 矩形左上角的 y 坐标

             *   w - 矩形的宽

             *   h - 矩形的高

             */

            ctx.fillRect(0, 0, 100, 100);

    

            /*

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

             *

             * 颜色值示例如下：

             *   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 = "#0f0";

            ctx.fillRect(120, 0, 100, 50);

    

            /*

             * context.lineWidth - 笔划的宽度，默认值是 1.0。

             *    注意看本 Demo，笔划的宽度为 10，可以明显的看出其中心线为笔划的路径，画布外的图像不予显示

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

             * context.strokeRect(x, y, w, h) - 绘制一个不填充的矩形

             *   x - 矩形左上角的 x 坐标

             *   y - 矩形左上角的 y 坐标

             *   w - 矩形的宽

             *   h - 矩形的高

             */

            ctx.lineWidth = 10;

            ctx.strokeStyle = "rgb(0, 0, 0)";

            ctx.strokeRect(0, 120, 100, 100);

    

            // 绘制一个填充色半透明的矩形

            ctx.fillStyle = "rgba(0, 255, 0, 0.3)";

            ctx.fillRect(0, 240, 100, 100);

        }

    

        function clearIt() {

            /*

             * context.clearRect(x, y, w, h) - 将指定的矩形区域上的图像全部清除

             */

            ctx.clearRect(0, 0, 300, 360);

    

            ctx.fillStyle = "Black";

            ctx.strokeStyle = "Black";

            ctx.lineWidth = 1;

        }

    

    </script>

</body>

</html>

 

3、路径方式绘制 - 弧线 | beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
canvas/shape/path/arc.html

发表回复

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

Grow your business fast with

Suku

Subscribe Now