【canvas】超级详细的--canvas使用

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	给子路径填充	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 = 20
let 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