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) |
| li***o | 从前一个点到指定点创建一个子路径 | li***o(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.li***o(100,20) 从前一个点到指定点创建一个子路径,此时只是生成一个路径，还需要描边才能看到
绘制第二条线条 ，可以以第一个线条的终点作为起点
cxt.li***o(100,100)
依次以第二条线的终点作为第三条线的起点，可以画出一个矩形
最后一条线也可以不使用调用li***o，使用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.li***o(index * gap, cvs.height);
ctx.stroke();
}
for (let index = 1; index < line; index++) {
ctx.strokeStyle = 'red'
ctx.moveTo(0, index*gap);
ctx.li***o(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
