<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                [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 =200x) # 矩形 ## "描邊" 矩形 我們可以使用`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 =400x) ## "填充" 矩形 我們可以使用`fillStyle`屬性與`fillRect()`方法來繪制一個"填充"矩形。 語法: ```js cxt.fillStyle = 屬性值 cxt.fillRect(x, y, width, height) ``` ![](https://img.kancloud.cn/8c/52/8c524e6f9210e5e943e934de4b8ec8ce_564x488.png =400x) 我們同時使用描邊和填充的效果如下: ```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 =200x) ## 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/bd/7b/bd7b7a87ac70c55dba01b500bcd31999_271x203.png =200x) ## 清空矩形 我們可以使用`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> <!--不用 css 樣式指定而直接使用屬性--> <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 =400x)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看