目录
Canvas
canvas是html5新增的可以通过脚本来绘制图形的html标签；
Canvas API 提供了通过 javascript与HTML的<canvas>元素 来绘制图形的方法；它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面;
使用
[1]html
<canvas id='canvas'>
替换文本/标签/内容
</canvas>
111
- 大小
- 默认大小为 300*150的画布；
- 若是修改宽高建议使用width、height属性而不是使用style样式(否则可能会造成图形看起来是扭曲的！)
- 兼容性
- 若是浏览器兼容canvas,则正常显示；
- 若是浏览器不兼容，则显示canvas标签间的替换内容；
- 因此canvas是双标签，且尾部标签不可省略(否则canvas后面的内容会被认为为替换内容导致不能正常显示)
[2]javascript
-
获取canvas元素
-
const canvas = document.getElementById('canvas')
-
-
获取canvas上下文
-
canvas元素存在一个getContext方法用于获取该元素的上下文；
-
// 获取2维上下文 if(canvas.getContext('2d')){ const ctx = canvas.getContext('2d') }else{ console.log('不兼容') } -
获取到上下文其实相当于得到一个画布，我们就可以在这个画布上写写画画了~
-
[3]绘制图形
(1)初始状态
-
-
初始状态为透明色的行内块元素；
(2)案例1-绘制矩形
-
-
想做一个如上的图
-
可以通过canvas上下文的fillStyle属性设置不同的样式；
-
可以通过canvas上下文的fillRect方法设置填充位置；
-
可以通过canvas上下文的clearRect方法清除填充样式；
-
可以通过canvas上下文的strokeRect方法绘制描边矩形；
-
this.$nextTick(()=>{ const canvas = document.getElementById('canvas') if(canvas.getContext('2d')){ const ct = canvas.getContext('2d') ct.fillRect(30,30,120,120) ct.clearRect(55,55,70,70) ct.strokeRect(60,60,60,60) }else{ console.log('当前浏览器不兼容canvas') } })
-
(3)案例2-绘制路径
- 路径定义：路径是通过不同 颜色和宽度的线段或曲线 相连形成的不同形状的点的集合；
- 绘制路径步骤
- 1.创建路径起始点;
- 2.使用画图命令去画路径；
- 3.路径封闭；
- 4.通过描边或填充路径区域来渲染图形；
方法
canvas元素地方法
getContext
-
语法
-
CanvasElement.getContext(contextType)
-
-
参数:参数为表示上下文类型地字符串
- ‘2d’:建立一个二维渲染上下文；
- ‘webgl’:建立一个3维渲染上下文对象(存在浏览器兼容问题)；
- ‘webgl2’:建立一个3维渲染上下文对象(存在浏览器兼容问题)；
- ‘bitmaprenderer’:建一个只提供将 canvas 内容替换为指定ImageBitmap功能的上下文；
-
返回值
- 若是参数为上面四个之一：返回值为与之对应的上下文对象；
- 否则：返回值为null;
绘制矩形的方法
fillRect
-
定义：fillRect是 Canvas 2D API 绘制
填充矩形的方法,fillStyle属性决定了对当前矩形的填充样式； -
语法：
-
fillRect(x,y,width,height) -
fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在(x, y) ，它的宽度和高度分别由width 和 height确定，填充样式由当前的fillStyle 决定;
-
-
注意：
-
超出画布的内容不显示；
-
相当于canvas设置了overflow:hidden;并且不可修改！
-
const ct = canvas.getContext('2d') ct.fillRect(30,30,170,170) -
- 如上图-绘制的矩形高度为170，但是超过canvas高度-不显示；
-
-
clearRect
-
定义：clearRect是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到
擦除一个矩形区域的目的; -
语法：
-
clearRect(x,y,width,height) -
x:矩形起点的 x 轴坐标;
-
y:矩形起点的 y 轴坐标；
-
width:矩形的宽度；
-
height:矩形的高度；
-
该方法会将以(x,y)坐标为起点，width高度，height宽度，包含在画布内的矩形元素的背景色设置为透明色；
-
strokeRect
-
定义：是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形的方法，绘制
描边矩形的方法； -
语法
-
strokeRect(x,y,width,height) -
x:矩形起点的 x 轴坐标;
-
y:矩形起点的 y 轴坐标；
-
width:矩形的宽度；
-
height:矩形的高度；
-
类似于border;
-
绘制线型的方法
beginPath
- 当创建新路径时，调用此方法；
moveTo
-
定义：将一个
新的子路径的起始点移动到 (x，y) 坐标的方法 -
语法：
-
moveTo(x,y) -
一条路径可能会有无数条子路径！
-
lineTo
-
定义：使用
直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制） -
语法
-
lineTo(x,y)
-
-
举例说明
-
this.$nextTick(()=>{ const canvas = document.getElementById('canvas') if(canvas.getContext('2d')){ const st = canvas.getContext('2d') // [1] 调用beginPath 表示生成新的路径 st.beginPath() // [2]起点+连接点 st.moveTo(50,50) st.lineTo(70,70) st.lineTo(70,100) }else{ console.log('该浏览器不兼容canvas') } }) -
// [3]绘制 st.fill() -
// [3]绘制 st.stroke()
-
arc
-
定义： 是 Canvas 2D API 绘制圆弧路径的方法；
-
语法
-
arc(x,y,r,start,end,anticlockwise) -
(x,y):圆心位置；
-
r:半径；
-
start:圆弧起始点，单位-弧度；
Math.PI
-
end:圆弧终止点，单位-弧度；
-
anticlockwise：true-逆时针绘制圆弧，反之，顺时针绘制;
- 默认顺时针
-
-
举例说明
-
-
this.$nextTick(()=>{ const canvas = document.getElementById('canvas') if(canvas.getContext('2d')){ const st = canvas.getContext('2d') // [1] 调用beginPath 表示生成新的路径 st.beginPath() // [2]起点+连接点 st.arc(75,75,50,0,Math.PI*2) // 新的子路径-不然会与上一个描点相连接！ st.moveTo(106,78) st.arc(75,78,30,0,Math.PI) st.moveTo(63,55) st.arc(55,55,8,0,Math.PI*2) st.moveTo(103,55) st.arc(95,55,8,0,Math.PI*2) // [3]绘制 st.stroke() }else{ console.log('该浏览器不兼容canvas') } })
-
arcTo
-
定义：是 Canvas 2D API 根据控制点和半径绘制圆弧路径的方法；
-
语法
-
arcTo(x1,y1,x2,y2,r) -
(x1,y1):第一个控制点坐标；
-
(x2,y2):第二个控制点坐标；
-
r:半径；
-
-
绘制规则
- 必须存在当前描点-前一个moveTo或lineTo等函数的止点；
- 根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径
quadraticCurveTo
-
定义：(二次贝塞尔曲线)绘制曲线；
-
语法
-
quadraticCurveTo(cpx.cpy,x,y) -
(cpx,cpy):控制点坐标；
-
(x,y):终点坐标；
-
将当前路径最新的点，(x,y)为终点，弧度由控制点方位来控制；
-
-
举例说明
-
-
this.$nextTick(()=>{ const canvas = document.getElementById('canvas') if(canvas.getContext('2d')){ const st = canvas.getContext('2d') // [1] 调用beginPath 表示生成新的路径 st.beginPath() // [2]起点+连接点 st.beginPath(); st.moveTo(75, 25); st.quadraticCurveTo(25, 25, 25, 62.5); st.quadraticCurveTo(25, 100, 50, 100); st.quadraticCurveTo(50, 120, 30, 125); st.quadraticCurveTo(60, 120, 65, 100); st.quadraticCurveTo(125, 100, 125, 62.5); st.quadraticCurveTo(125, 25, 75, 25); // [3]绘制 st.stroke(); }else{ console.log('该浏览器不兼容canvas') } })
-
bezierCurveTo
-
定义：(三次贝塞尔曲线)绘制曲线
-
语法
-
bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y) -
(cpx1,cpy1):控制点1的坐标；
-
(cpx2,cpy2):控制点2的坐标；
-
(x,y):终点坐标
-
将当前路径最新的点，(x,y)为终点，弧度由控制点方位来控制；
-
-
注：弧度不太容易确认可以使用在线工具
closePath
- 定义：是 Canvas 2D API 将笔点返回到当前子路径起始点的方法-既闭合线路径；
fill
- 定义：通过填充路径的内容区域生成实心的图形；
stroke
-
定义：通过线条来绘制图形轮廓；
-
fill与stroke比较举例说明
-
-
this.$nextTick(()=>{ const canvas = document.getElementById('canvas') if(canvas.getContext('2d')){ const st = canvas.getContext('2d') // [1] 调用beginPath 表示生成新的路径 st.beginPath() // [2]起点+连接点 st.moveTo(20,20) st.lineTo(70,20) st.lineTo(20,70) st.fill() st.moveTo(90,40) st.lineTo(90,90) st.lineTo(40,90) st.closePath() st.stroke() // [3]绘制 st.stroke() }else{ console.log('该浏览器不兼容canvas') } }) -
使用fill会
闭合路径，使用stroke不会闭合路径
-
绘制文本的方法
fillText
-
定义：是 Canvas 2D API 在 *(x, y)*位置
填充文本的方法； -
语法
-
fillText(text,x,y,maxWidth)- text:文本；
- x:x轴坐标；
- y:y轴坐标；
- maxWidth:绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放;
-
strokeText
-
定义：是 Canvas 2D API 在 *(x, y)*位置
描边文本的方法；- 若是字体比较小，看起来比较像填充；
-
语法
-
strokeText(text,x,y,maxWidth)- text:文本；
- x:x轴坐标；
- y:y轴坐标；
- maxWidth:绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放;
-
举例说明
-
const aaa = 'Hello World!' ct.font='28px serif' ct.fillText(aaa,50,50) -
-
const aaa = 'Hello World!' ct.font='20px serif' ct.strokeText(aaa,50,50) -
-
const aaa = 'Hello World!' ct.font='30px serif' ct.strokeText(aaa,50,50) -
canvas上下文的属性
fillStyle
- 定义：fillStyle是 Canvas 2D API 使用内部方式描述颜色和样式的属性-
内部填充色； - 默认值：#000(黑色)
- 注：仅设置样式，没有填充 — > 该样式是不起作用的！
strokeStyle
- 定义：是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性-
线条样式; - 默认值：#000(黑色)
- 注：仅设置样式，没有填充 — > 该样式是不起作用的！
lineWidth
- 定义：lineWidth是设置线段宽度度的属性；
- 默认值：1；
- 属性值:无单位
- 0、 负数、 Infinity和NaN会被忽略；
font
- 定义:是 Canvas 2D API 描述绘制文字时，当前字体样式的属性
- 默认值：’10px sans-serif‘
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
