Part1-直線、矩形、多邊形 · 前端小冊

[TOC] # \<canvas\>元素 ```html <canvas id="tutorial" width="300" height="300"></canvas> ``` 如果不給`<canvas>`設置`width`、`height`屬性，則默認`width`為 300、`height`為 150，單位都是`px`。也可以使用 css 屬性來設置寬高，但是如寬高屬性和初始比例不一致，他會出現扭曲。所以，建議永遠不要使用 css 屬性來設置`<canvas>`的寬高。 # 直線 ```js context.moveTo(x, y) ``` `moveTo()`的含義可以理解為 "將畫筆移動到（x，y）位置上，然后開始繪圖"。 ```js context.lineTo(x, y) ``` `lineTo()`理解為繪制直線到（x，y）位置即可。 ```js context.stroke() context.stroke(path) // Path2D對象，IE 瀏覽器不支持 ``` `stroke()`方法用于對路徑進行描邊。 <br /> 繪制一個箭頭：之后代碼不一定會貼出完整的 html 了 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>arrow</title> </head> <body> <canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;"></canvas> </body> </html> <script> window.onload = function () { let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') cxt.moveTo(40, 60) cxt.lineTo(100, 60) cxt.lineTo(100, 30) cxt.lineTo(150, 75) cxt.lineTo(100, 120) cxt.lineTo(100, 90) cxt.lineTo(40, 90) cxt.lineTo(40, 60) cxt.stroke() } </script> ``` 效果圖： ![](https://img.kancloud.cn/ac/16/ac166badaf4b2a83edae606c1696129b_271x202.png =150x) # 矩形 ## "描邊" 矩形我們可以使用`strokeStyle`屬性和`strokeRect()`方法來繪制一個"描邊"矩形，注意，我們稱`strokeStyle`為 context 對象的一個屬性，`strokeRect()`為 context 對象的一個方法。 <br /> 語法：和描邊是相同的 ```js cxt.strokeStyle = 屬性值 cxt.strokeRect(x, y, width, height) ``` 說明：x、y 表示矩形左上角的坐標，width、height 分別表示矩形的寬度和高度，如圖。 ![](https://img.kancloud.cn/47/aa/47aae38910fec7b7dc394d23fd2ec358_574x483.png =300x) ## "填充" 矩形我們可以使用`fillStyle`屬性與`fillRect()`方法來繪制一個"填充"矩形。語法： ```js cxt.fillStyle = 屬性值 cxt.fillRect(x, y, width, height) ``` ![](https://img.kancloud.cn/8c/52/8c524e6f9210e5e943e934de4b8ec8ce_564x488.png =300x) 我們同時使用描邊和填充的效果如下： ```js cxt.strokeStyle = 'red' // 先確定 Style 再繪制 cxt.strokeRect(50, 50, 80, 80) cxt.fillStyle = '#FFE8E8' cxt.fillRect(50, 50, 80, 80) ``` ![](https://img.kancloud.cn/be/b7/beb73474a3c2a68976aefd81d19a9e10_269x203.png =150x) ## rect() 方法 `rect()`方法也可以繪制矩形，與上面兩種方法略有不同。語法： ```js rect(x, y, width, height) ``` 同樣的，x、y 為矩形的最左上角的坐標，width、height 分別表示矩形的寬度和高度。其不同之處在于：`strokeRect()`和`fillRect()`這兩個方法在調用之后，會立即把矩形繪制出來，而`rect()`方法在調用之后，并不會把矩形繪制出來，只有在使用`rect()`方法之后再調用`stroke()`或`fill()`方法，才會繪制矩形。 <br /> 代碼示例如下： ```js // 繪制描邊矩形 cxt.strokeStyle = 'red' cxt.rect(50, 50, 80, 80) cxt.stroke() // 繪制填充矩形 cxt.fillStyle = '#FFE8E8' cxt.fill() ``` ![](https://img.kancloud.cn/be/b7/beb73474a3c2a68976aefd81d19a9e10_269x203.png =150x) ## 清空矩形我們可以使用`clearRect()`方法來清空指定矩形區域。語法： ```js cxt.clearRect(x, y, width, height) ``` 我們可以使用下面的代碼來清空整個 Canvas： ```js context.clearRect(0, 0, context.width, context.height) ``` # 多邊形 ## 繪制正多邊形我們可以根據正多邊形的特點封裝一個函數`createPolygon()`來繪制正多邊形，以最簡單的正三角形為例： ![](https://img.kancloud.cn/ef/7e/ef7e98053fe9dd0f60d322b3167370f2_795x608.png =450x) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>繪制正多邊形</title> </head> <body> <canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;"></canvas> </body> </html> <script> window.onload = function () { let cnv = document.getElementById('canvas') let cxt = cnv.getContext('2d') // 調用自定義方法 createPolygon(cxt, 3, 100, 75, 50) cxt.fillStyle = 'HotPink' cxt.fill() /* * n: 表示 n 邊形 * dx、dy: n 邊形的中心坐標 * size: 表示 n 邊形的大小 */ function createPolygon (cxt, n, dx, dy, size) { cxt.beginPath() // 開始一條新的路徑 let degree = (2 * Math.PI) / n for (let i = 0; i < n; i++) { let x = Math.cos(i * degree) let y = Math.sin(i * degree) cxt.lineTo(x * size + dx, y * size + dy) } cxt.closePath() // 關閉路徑 } } </script> ``` ![](https://img.kancloud.cn/ff/0a/ff0a208830c3f9a4056afac772f47eec_274x203.png =150x) ![](https://img.kancloud.cn/2f/81/2f81205b56f1f95dc9454cbddf9d4a21_263x201.png =150x) ![](https://img.kancloud.cn/01/1e/011e60401cc6895959e52f69c9d2143d_266x201.png =150x) ## 繪制七巧板 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas七巧板</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body>  <canvas id="canvas" style="border: 1px solid gray; display: block; margin: 50px auto;"></canvas> <script> let tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'}, {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#caff67'}, ] window.onload = function () { let canvas = document.getElementById('canvas'); canvas.width = 800; canvas.height = 800; let context = canvas.getContext('2d'); for(let i = 0; i < tangram.length; i++){ draw(tangram[i], context); } } function draw (piece, cxt) { // 第一個參數是七巧板中的一塊，第二個是 context cxt.beginPath(); cxt.moveTo(piece.p[0].x, piece.p[0].y); for(let i = 1;i < piece.p.length; i++){ cxt.lineTo(piece.p[i].x, piece.p[i].y); } cxt.closePath(); cxt.fillStyle = piece.color; cxt.fill(); cxt.strokeStyle = 'black'; cxt.lineWidth = 3; cxt.stroke(); } </script> </body> </html> ``` ![](https://img.kancloud.cn/a8/88/a88858148df704bf6936d0f605d47528_844x824.png =300x)