python用七巧板图片画个图_canvas练习 - 七巧板绘制

27

28 您的浏览器不支持canvas，请更换29

30

31 //function DrawLine(arr) {

32 ///* 之前这种写法，以为要一个moveTo一个lineTo的，后来发现moveTo一个开头就行了，剩下的就是lineTo一直走，且最后一个可以不闭合，就是最后一个lineTo可以不回到点上，这样的形状不闭合 */

33 //for (var i = 0; i < arr.length; i++) {

34 //context.moveTo(arr[i][0], arr[i][1]);

35 //if (i == arr.length - 1) { //最后一个点

36 //context.lineTo(arr[0][0], arr[0][1]);

37 //} else {

38 //context.lineTo(arr[i + 1][0], arr[i + 1][1]);

39 //}

40 //}

41 //}

42 functionDrawLine(arr,context) {43 for(vard= 0; d

55 /*为了闭合图形（画线情况），你也可以判断最后一个点时，让他回到初始值。如下：*/

56 for(vari= 0; i

58 context.lineTo(inArr[0][0], inArr[0][1]);59 }else{60 context.lineTo(inArr[i+1][0], inArr[i+1][1]);61 }62 }63 context.fillStyle=arr[d]['color'];64 context.fill();//每次循环也要重新画一遍

65 context.lineWidth= 3;66 context.strokeStyle= '#333';67 context.stroke();//每次循环也要重新画一遍

68 }69 }70

71 window.οnlοad= function(){72 varmyCanvas=document.getElementById('canvas');73 varcontext=myCanvas.getContext('2d');74 vartangram=[{75 name:'等腰三角形蓝',76 num: [77 [0,0],78 [250,250],79 [0,500]80 ],81 color:'#62d2ff'

82 },{83 name:'等腰三角形绿',84 num: [85 [0,0],86 [500,0],87 [250,250],88 ],89 color:'#83ff93'

90 },{91 name:'平行四边形',92 num: [93 [500,0],94 [500,250],95 [375,375],96 [375,125]97 ],98 color:'#ff8383'

99 },{100 name:'黄三角',101 num: [102 [375,125],103 [375,375],104 [250,250]105 ],106 color:'#fff56c'

107 },{108 name:'橙黄三角',109 num: [110 [500,250],111 [500,500],112 [250,500]113 ],114 color:'#ffb542'

115 },{116 name:'正方形',117 num: [118 [250,250],119 [375,375],120 [250,500],121 [125,375]122 ],123 color:'#f598e0'

124 },{125 name:'紫色正方形',126 num: [127 [250,500],128 [125,375],129 [0,500],130 ],131 color:'#c673e6'

132 }];133 DrawLine(tangram,context);134 }135

136