目录
一、低版本浏览器不显示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 | 可选。 要使用的图像的高度。(伸展或缩小图像) |
效果:碰到周围就会反弹
效果:
语法:
fillText(text, x, y, maxWidth); // 实心文字
strokeText(text, x, y, maxWidth); // 空心文字
参数:
text | 画布上输出的文本 |
x | 开始绘制文本的x坐标位置 |
y | 开始绘制文本的y坐标位置 |
maxWidth | 可选。允许的最大文本宽度, |
案例一:
效果:
语法:
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'