<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字渐变效果</title>
<style type="text/css">
div{
width: 100px
height: 30px
color: #000
transition: color 1s
}
div:hover{
color: yellow
}
</style>
</head>
<body>
<div>移入试试看</div>
</body>
</html>
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
在使用 canvas 绘制图像时，canvas 画布左上角的坐标为(0, 0)
注意：canvas 画布大小不可通过 css 来改变，只能通过属性方式设置，否则可能出现失帧的情况（当使用 css 方式改变 canvas 画布大小时，只是 cavas 标签的大小改变了，正真的绘图区域大小并没有改变，所以出现了失帧的情况）。
示例：
示例：
示例：
示例：
示例：
示例：
示例：
1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2） 注意事项：
context.rect(x, y, width, height)只是创建了矩形，并没有绘制出来。因此，创建完成后需使用 context.stroke()来绘制。
3）示例：
1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3）示例：
1）参数说明：
参数 x：矩形左上角的 x 坐标。
参数 y：矩形左上角的 y 坐标。
参数 width：矩形的宽度，以像素计。
参数 height：矩形的高度，以像素计。
2）笔触的默认颜色是黑色。
3）可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
4）示例：
1）参数说明：
参数 x：要清除的矩形左上角的 x 坐标。
参数 y：要清除的矩形左上角的 y 坐标。
参数 width：要清除的矩形的宽度，以像素计。
参数 height：要清除的矩形的高度，以像素计。
小技巧：
当 x = 0，y = 0，width = canvas.width，height = canvas.height 时，则可以清除画布上的矩形
2）示例：
1）参数说明：
参数 x：圆中心的 x 坐标。
参数 y：圆中心的 y 坐标。
参数 r：圆的半径。
参数 sAngle：起始角弧度（圆的三点钟位置是0度）。
参数 eAngle：结束角弧度（圆的三点钟位置是0度）。
参数 counterclockwise：规定逆时针还是顺时针绘图。f'alse = 顺时针，true = 逆时针。
2） 角度和弧度的关系：角度/弧度 = 180/pi
3）创建完圆弧后需使用 context.stroke()绘制创建的圆弧。
4）示例：绘制一个圆
5）示例：绘制圆上任意一点
圆上任意一点坐标：x = ox + r*cos(弧度)，y = oy + r*cos(弧度)
ox：圆心的 x 坐标。
oy：圆心的 y 坐标。
r：圆的半径。
2）设置字体水平对齐方式
2）设置字体垂直对齐方式
textBaseline 属性在不同的浏览器上效果不同，特别是使用 "hanging" 或 "ideographic" 时。
3）设置文字阴影效果
1）参数说明：
参数 text：文本内容
参数 x：开始绘制文本的 x 坐标位置（相对于画布）。
参数 y：开始绘制文本的 y 坐标位置（相对于画布）。
2）默认的填充颜色是黑色。可以使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
3）示例：
1）参数说明：
参数 text：文本内容
参数 x：开始绘制文本的 x 坐标位置（相对于画布）。
参数 y：开始绘制文本的 y 坐标位置（相对于画布）。
2）默认的笔触颜色是黑色。可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
3）示例：
1）参数说明：
参数 img：规定要使用的图像。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
2）当图像的大小超出画布的大小时，超出的部分将不会被显示出来。
3）示例：
1）参数说明：
参数 img：规定要使用的图像。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
参数 width：要使用的图像的宽度（伸展或缩小图像）。
参数 height：要使用的图像的高度（伸展或缩小图像）。
2）因保持 width/height = img.width/img.height，否则绘制后的图片会失帧。
3）示例：
1）参数说明：
参数 img：规定要使用的图像。
参数 sx：从图像的 sx 坐标位置开始剪切。
参数 sy：从图像的 sy 坐标位置开始剪切。
参数 swidth：剪切的宽度。
参数 sheight：剪切的高度。
参数 x：在画布上放置图像的 x 坐标位置。
参数 y：在画布上放置图像的 y 坐标位置。
参数 width：要使用的图像的宽度（伸展或缩小图像）。
参数 height：要使用的图像的高度（伸展或缩小图像）。
2）因保持 width/height = swidth/sheight，否则绘制后的图片会失帧。
3）示例：
stop：介于 0.0 与 1.0 之间的值，表示渐变中开始(0.0)与结束(1.0)之间的位置。
color：颜色。
示例：
