Document

--- theme: smartblue --- ![bg.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc0a0f08c2264a148f7c42b4344acdbd~tplv-k3u1fbpfcp-watermark.image?) 注：添加语法提示`/** @type {HTMLCanvasElement} */`，放在获取`canvas`节点之前 ### 获取`canvas`节点上下文 ```

3. 旋转 Rotating ``` // rotate方法，它用于以原点为中心旋转canvas // ratate(angle):angle是旋转的角度，顺时针方向，以弧度为单位的值 // 代码 ctx.translate(150, 200)// 旋转中心 for(let i=1;i <7;i++) { ctx.rotate(Math.PI*2/6) ctx.beginPath() ctx.arc(50,50,25,0,Math.PI*2) // 前两个参数是相对旋转中心的位置 ctx.fill() } ```

4. 缩放 Scalling ``` // scale(x,y) 两个参数都是实数，可以为负值，x为水平缩放因子，y为垂直缩放因子，如果比1小会缩小，比1大会放大，默认为1 // 注：缩放后面所有数值 // 代码 ctx.fillText('1',20,13) for(let i=1;i<5;i++){ ctx.save() ctx.translate(100-i*20,100-i*20) ctx.scale(i*1,i*1) ctx.strokeRect(0,0,40,40) ctx.stroke() ctx.restore() } ctx.fillText('2',200,13) for(let i=1;i<5;i++){ ctx.save() ctx.translate(200,20) ctx.scale(i,i) ctx.strokeRect(0,0,40,40) ctx.stroke() ctx.restore() } ctx.fillText('3',20,193) for(let i=1;i<5;i++){ ctx.save() ctx.translate(i*20,200+i*20-20) ctx.scale(2*i,2*i) ctx.lineWidth = 2/(2*i) // 使线条的宽度保持一致 ctx.strokeRect(0,0,20,20) ctx.stroke() ctx.restore() } ```

5. 变形Transforms ``` transform(a,b,c,d,e,f) a:水平方向的缩放 b:竖直方向的倾斜偏移 c:水平方向的倾斜偏移 d:竖直方向的缩放 e:水平方向的移动 f:竖直方向的移动 // 代码 ctx.fillStyle = 'rgb(231, 212, 233)' ctx.fillRect(0, 0, 150, 150) ctx.fillStyle = `rgb(0,0,0)` ctx.transform(2, 2, 0.3, 1, 20, 20) ctx.fillRect(0,0, 150, 150) ```

### 6.合成 1. 制作刮刮卡 ``` Document

``` ### 总结 1. 以上这些内容基本都是从MDN上面自学的，如有不对的地方欢迎指正；这里一下附上MDN的链接： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API 2. 最后的一个刮刮卡是参考掘金一位大佬在掘金发的文章，现在找不到了，如有侵权马上删除；