1 /**
2 * Created by ty on 2016/7/11.
3 * canvas 基础
4 */
5 window.onload = function() {
6 var canvas = document.getElementById("canvas");
7 var ctx = canvas.getContext("2d");
8
9 //画线条
10 ctx.moveTo(50, 50);
11 ctx.lineTo(200, 200);
12 ctx.lineTo(50, 200);
13 ctx.lineTo(50, 50);
14
15 ctx.fillStyle = "rgba(121, 13, 134, .6)";
16 ctx.fill();
17 //给该多边形描边
18 ctx.lineWidth = 6;
19 ctx.strokeStyle = "blue";
20 ctx.stroke();
21
22 //再画一条线，当有多个图形时候，应该每次前后都用beginPath()和closePath()
23 ctx.beginPath();
24 ctx.moveTo(150, 50);
25 ctx.lineTo(150, 100);
26
27 ctx.lineWidth = 10;
28 ctx.strokeStyle = "green";
29 ctx.stroke();
30
31
32 //画圆形-顺时针版
33 ctx.beginPath();
34 ctx.arc(300, 100, 60, 0, 1.5*Math.PI);
35 ctx.strokeStyle = "rgb(24,100,150)";
36 ctx.lineWidth = 3;
37 ctx.closePath();
38 ctx.stroke();
39
40 //画圆形-逆时针版
41 ctx.beginPath();
42 ctx.arc(430, 100, 60, 0, 0.5*Math.PI, true);
43 // ctx.strokeStyle = "rgb(24,100,150)";
44 // ctx.lineWidth = 3;
45 ctx.stroke();
46 ctx.closePath();
47
48 /**
49 * 渐变： 线性渐变
50 * 在新画布中做渐变
51 */
52 var canvas2 = document.getElementById("canvas2");
53 var ctx2 = canvas2.getContext("2d");
54
55 var linearGradient = ctx2.createLinearGradient(0, 0, ctx2.canvas.width, ctx2.canvas.height);
56 linearGradient.addColorStop(0,"#000");
57 linearGradient.addColorStop(1, "#035");
58 ctx2.fillStyle = linearGradient;
59 ctx2.fillRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
60
61 /**
62 * 渐变：径向渐变
63 * 在新画布中做渐变
64 */
65 var canvas3 = document.getElementById("canvas3");
66 var ctx3 = canvas3.getContext("2d");
67
68 var radialGradient = ctx3.createRadialGradient(0, 0, 100, 800, 800, 20);
69 radialGradient.addColorStop(0,"red");
70 radialGradient.addColorStop(0.5,"green");
71 radialGradient.addColorStop(1, "#035");
72 ctx3.fillStyle = radialGradient;
73 ctx3.fillRect(0, 0, ctx3.canvas.width, ctx3.canvas.height);
74
75
76 /**
77 * 使用pattern创建图片
78 * createPattern（ele, repeat-style）
79 */
80 var canvas4 = document.getElementById("canvas4");
81 var ctx4 = canvas4.getContext("2d");
82 var imgEle = new Image();
83
84 imgEle.src = "../image/search.png";
85 imgEle.onload = function() {
86 var imgPattern = ctx4.createPattern(imgEle, "repeat");
87 ctx4.fillStyle = imgPattern;
88 ctx4.rotate(10 * Math.PI / 180);
89 ctx4.fillRect(0, 0, ctx4.canvas.width, ctx4.canvas.height);
90 };
91
92
93 /**
94 * arcTo
95 */
96 var canvas5 = document.getElementById("canvas5");
97 var ctx5 = canvas5.getContext("2d");
98
99 ctx5.beginPath();
100 ctx5.moveTo(50, 50);
101 ctx5.lineTo(150, 50);
102 ctx5.lineTo(150, 150);
103
104 ctx5.strokeStyle = "green";
105 ctx5.stroke();
106
107 ctx5.beginPath();
108 ctx5.moveTo(50, 50);
109 ctx5.arcTo(150, 50, 150, 150, 70);
110
111 ctx5.strokeStyle = "purple";
112 ctx5.stroke();
113
114 /**
115 * fillText 文字 写字
116 */
117 //ctx.beginPath();
118 var canvas6 = document.getElementById("canvas6");
119 var ctx6 = canvas6.getContext("2d");
120 ctx6.font = "3rem normal Microsoft YaHei,weiruanyahei";
121 ctx6.fillText("88",100, 300);
122
123 ctx6.font = "3rem bold Microsoft YaHei,weiruanyahei";
124 ctx6.textAlign = "left";
125 ctx6.fillText("left",100, 380);//无bold效果，可见顺序不能变
126
127 ctx6.font = "bold 3rem Microsoft YaHei,weiruanyahei";
128 ctx6.textAlign = "right";
129 ctx6.fillText("right",100, 440);//有bold效果，可见顺序不能变
130
131 ctx6.font = "bolder 4rem Microsoft YaHei,weiruanyahei";
132 ctx6.textAlign = "center";
133 ctx6.fillText("center",100, 500);
134
135 //画个辅助线，看看文字对齐到底在哪儿
136 ctx6.beginPath();
137 ctx6.moveTo(400, 0);
138 ctx6.lineTo(100, 600);
139 ctx6.lineWidth=2;
140 ctx6.strokeStyle = "red";
141 ctx6.stroke();
142 ctx6.closePath();
143
144 //ctx.closePath();
145 };
