Canvas绘图(二)

 1 function createCanopyPath(context) {

 2     //绘制树冠

 3     context.beginPath();

 4 

 5     context.moveTo(-25, -50);

 6     context.lineTo(-10, -80);

 7     context.lineTo(-20, -80);

 8     context.lineTo(-5, -110);

 9     context.lineTo(-15, -110);

10 

11     //树的顶点

12     context.lineTo(0, -140);

13 

14     context.lineTo(15, -110);

15     context.lineTo(5, -110);

16     context.lineTo(20, -80);

17     context.lineTo(10, -80);

18     context.lineTo(25, -50);

19 

20     //连接起点,闭合路径

21     context.closePath();

22 }

23 

24 function drawTrails() {

25     var canvas = document.getElementById('trails');

26     var context = canvas.getContext('2d');

27 

28     context.save();

29     context.translate(130, 250);

30 

31     //创建表现树冠的路径

32     createCanopyPath(context);

33 

34     //加宽线条

35     context.lineWidth = 4;

36 

37     //平滑路径的接合点

38     context.lineJoin = 'round';

39 

40     //将颜色改成棕色

41     context.strokeStyle = '#663300';

42 

43     //将这条线绘制到canvas上

44     context.stroke();

45 

46     //将填充色设置为绿色并填充

47     context.fillStyle = '#339900';

48     context.fill();

49 

50     //将填充色设为棕色

51     context.fillStyle = '#663300';

52 

53     //填充用作树干的矩形区域

54     context.fillRect(-5, -50, 10, 50);

55 

56     //绘制当前路径

57     context.restore();

58 

59     //保存canvas的状态并绘制路径

60     context.save();

61 

62     context.translate(-10, 350);

63     context.beginPath();

64 

65     //第一条曲线向右上方弯曲

66     context.moveTo(0, 0);

67     context.quadraticCurveTo(170, -50, 260, -190);

68 

69     //第二条曲线向右下方弯曲

70     context.quadraticCurveTo(310, -250, 410, -250);

71 

72     //使用棕色的粗线条来绘制路径

73     context.strokeStyle = '#663300';

74     context.lineWidth = 20;

75     context.stroke();

76 

77     //恢复之前的canvas状态

78     context.restore();

79 }

80 

81 window.addEventListener("load", drawTrails, true);

 

 1 <!DOCTYPE HTML>

 2 <html lang="en-US">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title></title>

 6 </head>

 7 <body>

 8     <canvas id="trails" style="border:1px solid;" width="400" height="600"></canvas>

 9     <script src="index.js"></script>

10 </body>

11 </html>

你可能感兴趣的:(canvas)