hand（手形）、crosshair（十字）、text（文本光标）、wait（顾名思义啦）、default（默认效果）、help（问号）、e-size（向右箭头）、ne-resize（向右上的箭头）、nw-resize（向左上的箭头）、w-resize（向左的箭头）、sw-resize（左下箭头）、s-resize（向下箭头）、se-resize（向右下箭头）、auto（系统自动给出效果）等
浏览器调用的鼠标是系统的鼠标效果，因此同一用户不同浏览器差异很小；但不同操作系统差异很大
代码如下：<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>canvas实例--制作时钟</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" >
您的浏览器版本太低啦！可以换了！
</canvas>
<script>
//获取canvas
var canvas = document.getElementById("canvas")
//设置环境
var cxt = canvas.getContext("2d")
//制作时钟的函数
function DrawClock() {
//清除画布
cxt.clearRect(0,0,500,500)
//获取当前时间的时，分，秒
var now = new Date()
var hour = now.getHours()
var min = now.getMinutes()
var sec = now.getSeconds()
//小时必须获取浮点型（小时+分数--->转化为的小时）
hour = hour + min / 60
//将24小时转换为12小时
hour = hour >12 ? hour - 12 : hour
//制作表盘
cxt.beginPath()
cxt.lineWidth = 10
cxt.strokeStyle = "#ABCDEF"
cxt.arc(250, 250, 200, 0, 360, false)
cxt.stroke()
cxt.closePath()
//刻度
//时针
for (var i = 0i <12i++) {
cxt.save()
cxt.lineWidth = 7
cxt.strokeStyle = "red"
//设置0,0点
cxt.translate(250, 250)
//再设置旋转角度
cxt.rotate(i * 30 * Math.PI / 180)
cxt.beginPath()
cxt.moveTo(0, -170)
cxt.lineTo(0, -190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//分针
for (var i = 0i <60i++) {
//为避免不同颜色的重叠，
//在时针刻度与分针刻度重叠的位置，不画分针
if (i % 5 == 0) continue
cxt.save()
//设置刻度粗细
cxt.lineWidth = 5
cxt.strokeStyle = "purple"
//设置画布的0,0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(i * 6 * Math.PI / 180)
//画分针刻度
cxt.beginPath()
cxt.moveTo(0, -180)
cxt.lineTo(0, -190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//时针
cxt.save()
//设置时针风格
cxt.lineWidth = 7
cxt.strokeStyle = "pink"
//设置异次元空间的0,0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(hour * 30 * Math.PI / 180)
cxt.beginPath()
cxt.moveTo(0, -140)
cxt.lineTo(0, 10)
cxt.closePath()
cxt.stroke()
cxt.restore()
//分针
cxt.save()
//设置分针风格
cxt.lineWidth = 5
cxt.strokeStyle = "orange"
//设置异次元空间的0,0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(min * 6 * Math.PI / 180)
cxt.beginPath()
cxt.moveTo(0, -160)
cxt.lineTo(0, 15)
cxt.closePath()
cxt.stroke()
cxt.restore()
//秒针
cxt.save()
//风格
cxt.strokeStyle = "yellow"
cxt.lineWidth = 3
//重置0，0点
cxt.translate(250, 250)
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180)
//画图
cxt.beginPath()
cxt.moveTo(0, -170)
cxt.lineTo(0, 20)
cxt.stroke()
//画出时针，分针，秒针的交叉点
cxt.beginPath()
cxt.arc(0, 0, 5, 0, 360, false)
cxt.closePath()
//设置填充样式
cxt.fillStyle = "blue"
cxt.fill()
//设置笔触样式--->秒针已设置
cxt.stroke()
//设置秒针前端的小圆点
cxt.beginPath()
cxt.arc(0, -150, 5, 0, 360, false)
cxt.closePath()
//设置填充样式
cxt.fillStyle = "blue"
cxt.fill()
//设置笔触样式
cxt.stroke()
cxt.closePath()
cxt.restore()
}
//调用函数
DrawClock()
//设置时钟转动起来
setInterval(DrawClock, 1000)
</script>
</body>
</html>
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
值
描述
url
需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
