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-sizetextAlign设置文本的水平对齐方式left文本的左侧与参考点重合对齐,right文本的右侧与参考点重合,center文本中间位置与参考点重合,start,endtextBaseline设置文本垂直的对齐方式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
版权归原作者 PiPiFamily 所有， 如有侵权，请联系我们删除。