canvas详解 非常详细的使用方法
一、 canvas介绍
是html5新增元素，通过canvas生成一块画布，在画布上使用javascript来绘制图形或实现图形动画。
两个属性：
width
和
height，
不加单位 默认px，设置画布的宽高，如果不设置，会默认一个300*150的画布
<body><canvas >不是所有浏览器都支持，可以在标签内提示，您的浏览器不支持canvas，请升级 </canvas></body>有了画布以后就可以使用js获取canvas元素节点，进行渲染上下文
<body><canvas class="canvas"> </canvas><script>const cvs = document.querySelector('.canvas')const ctx = cvs.getContext('2d')</script></body>画一个填充矩形
有了画布以后就可以使用js获取canvas元素节点，进行渲染上下文，这里举一个栗子ctx.fillRect(20,20,200,100)canvas坐标轴的概念
坐标原点在左上角，页面作画是从左到右从上到下
• x轴往右
• y轴往下
二、渲染上下文
在canvas画布上绘制图形，首先用getContext()方法获取上下文
类似于ps内的工具箱，利用canvas的上下文内拿到各种属性方法来进行绘制
可以传入类型
• 2d, 创建二维平面的渲染上下文 主要讲2d
getContext(‘2d’)返回一个CanvasRendering2D对象，绘制过程中使用的绘制方法，绘制属性都来自CanvasRendering2D对象
有关笔触设置的属性
| 属性 | 描述 | 备注 |
|---|---|---|
| fillStyle | 设置填充的颜色和样式 | 可设置color颜色或渐变对象 |
| strokeStyle | 设置笔描边的颜色和样式 | 可设置color颜色或渐变对象 |
| lineWidth | 设置笔触的厚度 | 即线段的厚度 |
有关模糊阴影设置的属性
| 属性 | 描述 | 备注 |
|---|---|---|
| shadowBlur | 设置模糊阴影 | |
| shadowOffsetX | 设置阴影水平位移 | |
| shadowOffsetY | 设置阴影垂直位移 | |
| shadowColor | 设置阴影的颜色 |
有关文本设置的属性
| 属性 | 描述 | 备注 |
|---|---|---|
| font=(italic 48px Microsoft YaHei,Fira Sans,serif) | 设置文本的字体样式 | 和css的font相同的书写规则font-family,font-size,font-style,font-weight,canvas内最少要设置font-family,font-size |
| textAlign | 设置文本的水平对齐方式 | left文本的左侧与参考点重合对齐,right文本的右侧与参考点重合,center文本中间位置与参考点重合,start,end |
| textBaseline | 设置文本垂直的对齐方式 | top文本的上侧与参考点重合对齐,bottom文本的下侧与参考点重合对齐,middle文本的中侧与参考点重合对齐hanging基线是悬挂基线,alphabetic基线是标准的文本基线,） |
路径和路径绘制方法
| 方法名 | 描述 | 语法 |
|---|---|---|
| beginPath | 创建一个新的路径 | beginPath( ) |
| closePath | 尝试封闭路径 | closePath( ) |
| stroke | 给已有的子路径描边 | stroke( ) |
| fill | 给子路径填充 | |
| moveTo | 移动笔触到指定位置点 | moveTo(x,y) |
| lineTo | 从前一个点到指定点创建一个子路径 | lineTo(x ,y ) |
| arc | 创建一段圆弧路径 | arc(x,y,radius,startAngle,endAngle,anticlockwise) |
| bezierCurveTo | 创建一个贝塞尔曲线路径 | bezierCurveTo(ctr1x ,ctr1y ,ctr2,xctr2y,x,y) |
| rect | 创建一个矩形路径 | rect(x,y,width,heiht) |
| fillRect | 直接绘制出一个填充矩形 | fillRect(x,y,width,heiht) |
| strokeRect | 直接绘制出描边矩形 | strokeRect(x,y,width,heiht) |
| clearRect() | 清空画布指定区域 | clearRect(x,y,width,height) |
| lineCap | 设置线段末端样式 | 值:默认butt,round线条会在末端增加线条宽度一半 的长度, |
文本方法
| 方法名 | 描述 | 语法 |
|---|---|---|
| fillText() | 用于绘制填充文本 | fillText(text,x,y,[maxWidth]) |
| strokeText() | 用于绘制描边文本 | strokeText(text,x,y,[maxWidth]) |
| measureText() | 返回包含指定文本宽度的对象 |
图像方法
| 方法名 | 描述 | 语法 |
|---|---|---|
| fillText() | 用于绘制填充文本 | fillText(text,x,y,[maxWidth]) |
| strokeText() | 用于绘制描边文本 | strokeText(text,x,y,[maxWidth]) |
| measureText() | 返回包含指定文本宽度的对象 |
• webgl 创建三维平面的渲染上下文
绘制线条
两点连成一个线条
新的路径每开一条路径，需要设置新的lineWidth、strokeStyle需要用beginPath()隔开避免下面的样式相互作用影响cxt.beginPath()设置线条宽度cxt.lineWidth = 10设置末端样式cxt.lineCap = 'round'设置描边颜色cxt.strokeStyle = 'red'先绘制路径cxt.moveTo(20,20) 移动笔触到指定位置点cxt.lineTo(100,20)从前一个点到指定点创建一个子路径,此时只是生成一个路径，还需要描边才能看到绘制第二条线条 ，可以以第一个线条的终点作为起点cxt.lineTo(100,100)依次以第二条线的终点作为第三条线的起点，可以画出一个矩形最后一条线也可以不使用调用lineTo，使用closePath()尝试封闭路径，这样也可以形成一个矩形cxt.closePath()填充描边cxt.stroke() 给已有的子路径描边 const cvs = document.querySelector(".canvas");let gap = 50;let row = Math.floor(cvs.width / gap);let line =Math.floor(cvs.height / gap)const ctx = cvs.getContext("2d");for (let index = 1; index < row; index++) {ctx.strokeStyle = 'red'ctx.moveTo(index * gap, 0);ctx.lineTo(index * gap, cvs.height);ctx.stroke();}for (let index = 1; index < line; index++) {ctx.strokeStyle = 'red'ctx.moveTo(0, index*gap);ctx.lineTo(cvs.width, index*gap);ctx.stroke();}绘制矩形
确定一个起点的x，y轴坐标，确定绘制的矩形的width、height
调用rect( )方法可以创建一个矩形路径并没有绘制出来cxt.rect() rect(x,y,width,heiht)设置描边颜色cxt.strokeStyle = 'red'设置填充颜色cxt.fillStyle = "orange"填充描边cxt.stroke() 给已有的子路径描边也可调用fill() 进行填充路径cxt.fill()fillRect()绘制一个填充矩形参数x,y,width,heiht不需要调用stroke() strokeRect()绘制一个描边矩形参数x,y,width,heiht 不需要调用stroke()const cvs = document.querySelector(".canvas");let gap = 50;let row = Math.floor(cvs.width / gap);let line = Math.floor(cvs.height / gap);const ctx = cvs.getContext("2d");for (let i = 0; i < row; i++) {for (let j = 0; j < line; j++) {if(j%2){if (i % 2) {ctx.fillStyle = "blue";ctx.fillRect(i * gap,j * gap, gap, gap);} else {ctx.fillStyle = "#000";ctx.fillRect(i * gap, j * gap, gap, gap);}}else{if (i % 2) {ctx.fillStyle = "#000";ctx.fillRect(i * gap,j * gap, gap, gap);} else {ctx.fillStyle = "blue";ctx.fillRect(i * gap, j * gap, gap, gap);}} }}动画
动画就是一个一个图片连贯起来
使用setInterval()
let x = 20let timer = setInterval(()=>{清空画布ctx.clearRect(0,0,cvs.width,cvs.height)更改坐标位置或者其他信息（大小、颜色等图形信息）x++重新绘制ctx.fillRect(x,20,100,100)if(x===cvs.width){clearInterval(timer)},1)使用mdn的动画关键帧
使用mdn 的window.requestAnimationFrame
window.requestAnimationFrame(()=>{let x = 20清空画布ctx.clearRect(0,0,cvs.width,cvs.height)更改坐标位置或者其他信息（大小、颜色等图形信息）x++重新绘制ctx.fillRect(x,20,100,100)})绘制文本
fillText()和strokeText()
fillText(‘text’,x,y,[maxWidth])和strokeText(‘text’,x,y,[maxWidth)
它们都接收四个参数：
• text:要绘制的字符串
• x：文字的起始X坐标
• y：文字的起始Y坐标
• maxWidth:可选参数，文本在画布上的最大宽度，如果指定了该值，文本宽度超出会自动水平缩放
cxt.font = '48px'cxt.fillText('哈哈哈'，20，20)cxt.strokeText('嘿嘿嘿嘿'，20，200)圆弧知识
绘制圆弧arc(),以(x,y)坐标为圆心，绘制指定半径的圆或圆弧
arc(x,y,r,startAngle,endAngle,[directron])
参数
• x:圆心x轴坐标
• y:圆心y轴坐标
• r:圆弧半径
• startAngle：圆弧的起始弧度位置，单位以弧度表示
• endAngleqi’shi:圆弧的终止位置，单位以弧度表示
• directron:决定绘制圆弧的顺序，默认false顺时针旋转，true逆时针旋转
弧度和角度换算:
180°=1Π = 1Math.PI
周长=2Πr =2Math.PIr
弧长=圆心角度Math.PIr/180