【前端】【canvas详解非常详细的使用方法】

PiPiFamily

已于 2023-06-08 16:44:14 修改

阅读量4.6k

点赞数 10

分类专栏： canvas使用文章标签： javascript 开发语言 ecmascript

于 2023-06-08 15:50:16 首次发布

本文链接：https://blog.csdn.net/PiPiFamily/article/details/131108351

版权

canvas使用专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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 = 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