<script> <br/> // 想要在Cavnas ：我們可以從canvas標籤上取得一個繪圖物件（上下文物件）， <br/> // 繪圖的各種方法和設置，都放在這個物件上. <br/> var cvs = document. = cvs.getContext('2d'); // 取得canvas2d繪圖工具 <br/> // 3. 以繪製路徑。 <br/> ctx.moveTo(50,50); // 把「鋼筆」移到影像的某個位置上 <br/> ctx.lineTo(150,50); // 用「鋼筆」連線到某點上 . lineTo(150,150); <br/> ctx.lineTo(50,150); <br/> ctx.lineTo(50,50); <br/> // 現在我們的canvasTo(50,50); <br/> // 現在我們的canvas上還沒有什麼，為什麼？ 因為moveTo和lineTo是用來繪製路徑的。 <br/> // 路徑是用來描述我們想要繪製的形狀或線條的「草稿」 <br/> // 4. 填入或描邊路徑。 <br/> // 在描邊或填入之前，我們可以設定描邊或填入的色彩。 <br/> // Canvas是「在畫過之後瀏覽器就不管他了」的機制， <br/> // 所以我們想要設定描邊或填填滿了，再去設定樣式，是不管用的 <br/><br/> ctx.strokeStyle = 'lightgreen'; // 設定描邊的顏色為綠 <br/> ctx.lineWidth = 25; // 設定描邊的線條寬度… (); // 描邊 <br/><br/> ctx.fillStyle = 'pink'; <br/> ctx.fill(); // 填入<br/></script>
