canvas的基础讲解
目录
一、低版本浏览器不显示canvas, 并给出提示
二、canvas是一个行内元素，想要居中就需要把他变成块元素
三、画线
四、画矩形
五、清除画布
六、画圆
七、画圆弧
一、低版本浏览器不显示canvas, 并给出提示
能显示canvas就没有文字提示，不显示canvas就显示提示文字
二、canvas是一个行内元素，想要居中就需要把他变成块元素
效果：
三、画线
效果：
四、画虚线
语法：
ctx.setLineDash([虚线长度, 虚线间隔])
drawLine(起始点的x坐标, 起始点的y坐标, 终点的x坐标, 终点的y坐标, 虚线的颜色 )四、画矩形
rect(x, y, width, height) // 可描边、填充
fillRect(x, y, width, height) // 不可描边、只能填充
strokeRect(x, y, width, height) // 只能描边、不可填充| x | 矩形左上角的x坐标 |
| y | 矩形左上角的y坐标 |
| width | 矩形的宽度，以像素为单位 |
| height | 矩形的高度，以像素为单位 |
注意： 注意需要填充和描边的 先填充后描边 否则填充会压着描边
案例：
效果：
五、清除画布
语法：
clearRect(x, y, width, height)案例：
效果：
六、画圆
语法：
arc(x, y, radius, startAngle, endAngle, counterclockwise)参数
| x | 圆心 x 坐标 |
| y | 圆心 y 坐标 |
| radius | 半径 |
| startAngle | 开始的角度 |
| endAngle | 结束的角度 |
| counterclockwise | true: 逆时针、false: 顺时针 |
案例：
效果：
七、画圆弧
注意： 当前使用了新了一个beginPath() 所以上一个不需要closePath 因为他默认给你加上了
八、绘制图片
方式一
// 在画布上定位图像
ctx.drawImage(img, x, y)方式二
// 在画布上定位图像 并规定图像的宽、高
ctx.drawImage(img, x, y, width, height)方式三
// 剪切图像，并在画布上定位被裁剪的部分
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)参数：
| img | 要使用的图像、画布、视频 |
| sx | 可选。开始剪切的 x 坐标 |
| sy | 可选。开始剪切的 y 坐标 |
| swidth | 可选。被剪切图像的宽度 |
| sheight | 可选。被剪切图像的高度 |
| x | 在画布上放置图像的 x 坐标 |
| y | 在画布上放置图像的 y 坐标 |
| width | 可选。 要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。 要使用的图像的高度。（伸展或缩小图像） |
八、案例：小球碰壁检测
效果：碰到周围就会反弹
九、案例：小球碰壁检测（面向对象）
效果：
十、画文字
1、基础显示
语法：
fillText(text, x, y, maxWidth); // 实心文字
strokeText(text, x, y, maxWidth); // 空心文字参数：
| text | 画布上输出的文本 |
| x | 开始绘制文本的x坐标位置 |
| y | 开始绘制文本的y坐标位置 |
| maxWidth | 可选。允许的最大文本宽度， |
案例一：
效果：
2、文字渐变
语法：
var gradient = ctx.createLinearGradient(x0, y0, x1, y1)参数：
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
案例：
Document
效果：
3、文字位置
语法：
textAlign = 'start' | 'end' | 'left' | 'right' | 'center' // 水平方向
textBaseLine = 'top' | 'bottom' | 'moddle' | 'alphabetic' | 'hanging'
