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)