Canvas講解

時間 2019-11-12

標籤 canvas 講解简体版

原文原文鏈接

1.Canvas是什麼？ html

簡單地說canvas是畫布，能夠進行畫任何的線、圖形、填充等一系列的操做，並且操做的畫圖就是js，canvas

提供簡單的二維矢量繪圖.dom

2.步驟：spa

<canvas id="aa">12</canvas> //建立HTML頁面，設置畫布標籤
var canvas=document.getElementById("aa");//編寫js，獲取畫布dom對象
var ctx=canvas.getContext("2d"); //經過Canvas標籤的Dom對象獲取上下文
ctx.fillStyle="green"; //設置繪製線樣式、顏色
ctx.fillRect(10,10,100,100); //繪製矩形，或者填充矩形

3.代碼：code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>個人網頁</title>
 6 </head>
 7 <body>
 8     <h1>個人網頁</h1>
 9     <hr>
10     <canvas id="aa">12</canvas>
11     <script>
12         var canvas=document.getElementById("aa");
13         var ctx=canvas.getContext("2d");
14         ctx.fillStyle="green";
15         ctx.fillRect(0,0,100,100);
16         ctx.strokeRect(120, 0, 100, 100);
17         // 設置帶透明度的樣式
18         ctx.fillStyle = "rgba(0,255,0,0.5)";
19         ctx.strokeStyle = "rgba(255,0,255,0.5)";
20         ctx.fillRect(240,0 , 100, 100);
21         ctx.strokeRect(240, 120, 100, 100);
22     </script>
23 </body>
24 </html>