Canvas 總結，到第4章 canvas圖形變換

時間 2019-11-09
標籤 canvas 總結圖形變換简体版
原文原文鏈接
  1 canvas 必須認識到的大坑
  2 <!-- 重點：
  3     在js/canvas標籤中定義的寬和高是畫布實際的寬和高。
  4     在樣式表中定義的寬和高是畫布縮放後的寬和高。
  5     即：把js/canvas實際大小縮放到css中的寬高便可。瀏覽器中顯示的效果是css中設置的寬高。
  6 
  7 一，沒有設置canvas寬高，默認是300px*150px。設置canvas在瀏覽器中的實際寬高，必須在canvas標籤或者使用js進行設置。而使用css進行設置的寬高是進行縮放後大小，與實際位置不一樣。
  8 
  9     1，<canvas id="mycanvas" class="mycanvas" width="200px" height="200px">您的瀏覽器不支持canvas標籤</canvas>
 10     2，    var mycanvas = document.querySelector("#mycanvas");
 11         var ctx = mycanvas.getContext('2d');//2d畫布環境
 12         mycanvas.width=400; //這裏沒有單位
 13         mycanvas.height=300; //這裏沒有單位
 14  -->
 15 <!DOCTYPE html>
 16 <html lang="en">
 17 <head>
 18     <meta charset="UTF-8">
 19     <title>canvas的坑</title>
 20     <style>
 21         .mycanvas{background: #ccc;width: 500px;height: 500px;}
 22         .mycanvas1{
 23             background: yellow;
 24             /*這裏的設置的寬高等價於把canvas默認寬高300*150 進行縮放至 100*100。
 25             因此在js中 從(0,0)到(100,100)之間畫一條直線，這兩個點也按照300*150進行縮放，再畫直線*/
 26             width: 200px;
 27             height: 200px;
 28         }
 29     </style>
 30 </head>
 31 <body>
 32     <canvas id="mycanvas" class="mycanvas">您的瀏覽器不支持canvas標籤</canvas>
 33     <script type="text/javascript">
 34         var mycanvas = document.querySelector("#mycanvas");
 35         var ctx = mycanvas.getContext('2d');//2d畫布環境
 36         mycanvas.width=100;//在頁面中實際大小
 37         mycanvas.height=100;//在頁面中實際大小
 38         ctx.moveTo(0,0);
 39         ctx.lineTo(100,100);
 40         ctx.stroke();
 41     </script>
 42 
 43     <canvas id="mycanvas1" class="mycanvas1">您的瀏覽器不支持canvas標籤</canvas>
 44     <script type="text/javascript">
 45         var mycanvas1 = document.querySelector("#mycanvas1");
 46         var ctx1 = mycanvas1.getContext('2d');//2d畫布環境
 47         ctx1.moveTo(0,0);
 48         ctx1.lineTo(100,100);
 49         ctx1.stroke();
 50     </script>
 51 </body>
 52 </html>
 53 
 54 ===========
 55 
 56 ctx.beginPath(); 清除以前在內存中預先畫的路徑，從新開始預先畫路徑，直到ctx.stroke()纔會真正在頁面中畫出路徑
 57 
 58 重點：ctx.beginPath();實例一：
 59 <!DOCTYPE html>
 60 <html lang="en">
 61 <head>
 62     <meta charset="UTF-8">
 63     <title>canvas</title>
 64     <style>
 65         .mycanvas{background: #ccc;}
 66     </style>
 67 </head>
 68 <body>
 69     <canvas id="mycanvas" class="mycanvas" width="300px" height="300px">您的瀏覽器不支持canvas</canvas>
 70     <script>
 71         var canvas = document.querySelector("#mycanvas");
 72         var ctx = canvas.getContext("2d");//2d環境
 73         //moveTo(0,0) 到 ctx.lineTo(100,200) 只是在內存中預先畫的路徑，並無畫出來。
 74         ctx.moveTo(0,0);
 75         ctx.lineTo(100,100);
 76         ctx.lineTo(100,200);
 77         ctx.strokeStyle = "red";
 78         ctx.stroke();//已經畫一次
 79 
 80         //ctx.beginPath(); 做用：清除以前在內存中預先畫的路徑，從新開始預先畫路徑。
 81         //若是註釋該代碼，那麼上面的路徑在內存中會被再畫一次。再繼續畫下面的路徑。
 82         //到了最後的ctx.stroke()時，就會把內存中預先畫好的路徑所有畫出來。
 83         ctx.beginPath();
 84         ctx.moveTo(100,0);
 85         ctx.lineTo(200,100);
 86         ctx.lineTo(200,200);
 87         ctx.strokeStyle = "green";
 88         ctx.stroke();//畫出內存中預先畫好的路徑。
 89     </script>
 90 </body>
 91 </html>
 92 
 93 
 94 重點：
 95 ctx.beginPath() 和 ctx.closePath() 不必定要成對出現，由於意義徹底不一樣。
 96 
 97 canvas 模板：
 98 var canvas = document.querySelector("#mycanvas");
 99 var ctx = canvas.getContext("2d");//設置繪畫2d環境
100 ctx.beginPath(); 清除以前在內存中預先畫的路徑，從新開始預先畫路徑，直到ctx.stroke()纔會真正在頁面中畫出路徑
101 .........(具體畫什麼圖形)
102 ctx.closePath();//自動閉合起點和終點，不必定要有，須要閉合路線才寫。
103 ctx.strokeStyle="#d36";//設置路線顏色
104 ctx.stroke();//把內存中的路徑所有畫在網頁中
105 
106 //畫線
107 ctx.beginPath(); 清除以前在內存中預先畫的路徑，從新開始預先畫路徑，直到ctx.stroke()纔會真正在頁面中畫出路徑
108 ctx.moveTo(50,500);
109 ctx.lineTo(100,300);
110 ctx.lineTo(300,600);
111 ctx.closePath();//自動閉合起點和終點
112 ctx.strokeStyle="#d36";//設置路線顏色
113 ctx.stroke();//把內存中的路徑所有畫在網頁中
114 
115 // 畫圓  ctx.arc(x,y,r,開始弧度,終止弧度,true逆時針畫/flase順時針畫);
116 // ctx.arc(圓點x軸座標,圓點y軸座標,圓的半徑,開始弧度,終止弧度,true逆時針畫/flase順時針畫);
117 
118 // 畫矩形  rectangle 英 [ˈrektæŋɡl] 矩形
119 // ctx.strokeRect(x,y,width,height);該方法是已經封裝好了的，不用ctx.beginPath(),ctx.closePath(),ctc.stroke();
120 // ctx.strokeRect(矩形起始點x軸座標,矩形起始點y軸座標,矩形寬,矩形高);
121 ctx.strokeStyle="purple";
122 ctx.strokeRect(200,200,300,100);
123 
124 
125 <!DOCTYPE html>
126 <html lang="en">
127 <head>
128     <meta charset="UTF-8">
129     <title>canvas</title>
130     <style>
131         .mycanvas{background: #ccc;}
132     </style>
133 </head>
134 <body>
135     <canvas id="mycanvas" class="mycanvas" width="600px" height="600px">您的瀏覽器不支持canvas</canvas>
136     <script>
137         var canvas = document.querySelector("#mycanvas");
138         var ctx = canvas.getContext("2d");//2d環境
139         //moveTo(0,0) 到 ctx.lineTo(100,200) 只是在內存中預先畫的路徑，並無畫出來。
140         ctx.moveTo(50,250);
141         ctx.lineTo(250,250);
142         ctx.strokeStyle = "green";
143         ctx.stroke();
144         ctx.beginPath();//若是重新開始話，必須清除以前內存中預畫的路徑
145         ctx.moveTo(250,250);
146         ctx.lineTo(150,50);
147         ctx.strokeStyle = "yellow";
148         ctx.stroke();
149         ctx.beginPath();//若是重新開始話，必須清除以前內存中預畫的路徑
150         ctx.moveTo(150,50);
151         ctx.lineTo(50,250);
152         ctx.strokeStyle = "red";
153         ctx.stroke();
154 
155         //畫線
156         ctx.beginPath();//清除內存中預畫好的路徑，重新開始預畫路徑。
157         ctx.moveTo(50,500);
158         ctx.lineTo(100,300);
159         ctx.lineTo(300,600);
160         ctx.closePath();//自動閉合起點和終點
161         ctx.strokeStyle="#d36";
162         ctx.stroke();
163 
164 
165         // 畫圓  ctx.arc(x,y,r,開始弧度,終止弧度,true逆時針畫/flase順時針畫);
166         // ctx.arc(圓點x軸座標,圓點y軸座標,圓的半徑,開始弧度,終止弧度,true逆時針畫/flase順時針畫);
167         ctx.beginPath();
168         ctx.arc(200,400,50,0,2*Math.PI,true);
169         ctx.closePath();
170         ctx.strokeStyle="#00d";
171         ctx.stroke();
172 
173         // 畫矩形  rectangle 英 [ˈrektæŋɡl] 矩形
174         // ctx.strokeRect(x,y,width,height);
175         // ctx.strokeRect(矩形起始點x軸座標,矩形起始點y軸座標,矩形寬,矩形高);
176         ctx.strokeStyle="purple";
177         ctx.strokeRect(200,200,300,100);
178     </script>
179 </body>
180 </html>
181 
182 ===========
183 
184 重點：描邊 與 填充
185 兩者能夠一塊兒使用，除了已經封裝好的矩形ctx.strokeRect(x,y,w,h);
186 // 先描邊再填充，填充會覆蓋描邊的顏色
187 // 若是是先填充再描邊，描邊會覆蓋填充。
188 // 即後者會覆蓋前者的。
189 
190 給路徑或圖形填充顏色話，若是不設置顏色的話，默認顏色是黑色，若是要設置顏色的話，要寫設置顏色，而後再調用fill方法。這裏的#00f就是藍色
191 
192 //描邊樣式
193 ctx.strokeStyle="#f0f";//必須寫在stroke()方法以前，以後的無效
194 ctx.lineWidth = 5;
195 ctx.stroke();
196 
197 //填充樣式
198 ctx.fillStyle="#0f0";//必須寫在fill()方法以前，以後的無效
199 ctx.fill();
200 
201 <!DOCTYPE html>
202 <html lang="en">
203 <head>
204     <meta charset="UTF-8">
205     <title>描邊與填充</title>
206     <style>
207         .mycanvas{background: #ccc;}
208     </style>
209 </head>
210 <body>
211     <canvas id="mycanvas" class="mycanvas" width="300px" height="300px">您的瀏覽器不支持canvas,請升級！</canvas>
212     <script>
213         var canvas = document.querySelector("#mycanvas");
214         var ctx = canvas.getContext("2d");//設置2d環境
215         ctx.moveTo(20,20);
216         ctx.lineTo(50,100);
217         ctx.lineTo(20,100);
218         ctx.closePath();
219         // 先描邊再填充，因此填充會覆蓋描邊的顏色
220         // 若是是先填充再描邊，描邊會覆蓋填充。後面覆蓋前面的部分。
221         ctx.strokeStyle="#f0f";
222         ctx.lineWidth = 5;
223         ctx.stroke();
224         ctx.fillStyle="#0f0";
225         ctx.fill();
226 
227         //畫圓
228         // 先描邊再填充，填充的紅色會覆蓋描邊的紫色
229         // 相反，描邊的紫色會覆蓋填充的紅色
230         ctx.beginPath();
231         ctx.arc(100,200,50,0,2*Math.PI,true);
232         ctx.strokeStyle="purple";
233         ctx.lineWidth=10;
234         ctx.stroke();
235         ctx.fillStyle="rgba(255,0,0,.2)";
236         ctx.fill();
237 
238         //矩形
239         ctx.beginPath();
240         ctx.strokeStyle="rgba(0,255,255,.5)";
241         ctx.lineWidth=20;
242         ctx.strokeRect(150,80,100,50);
243         //由於ctx.strokeRect(x,y,w,h);是已經封裝好的，因此使用fill()方法是無效的，即矩形不能填充，只能使用其餘方式進行填充。
244         // ctx.fillStyle="green";
245         // ctx.fill();
246     </script>
247 </body>
248 </html>
249 
250 =========
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。