继上次写关于canvas已经过去两天了，通过这两天对它的学习，怎么说呢，兄弟们记住api吧，通过学习，做了个时钟的案例，难受
时钟
直接放代码了，对于的api可以在官网以及菜鸟教程里面能找到
<!DOCTYPE html>
<html lang="en" style="width: 100%;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
</head>
<style>
#main {
width: 400px;
height: 100px;
position: relative;
}
#canvas,
#ggk {
position: absolute;
top: 0;
left: 0;
font-size: 26px;
}
#ggk {
position: absolute;
top: 35px;
left: 150px;
}
</style>
<div id="main">
<p id="date"></p>
<canvas id="canvas" width="400" height="400" style="width: 400px;height: 400px;"></canvas>
</div>
<script>
var dto = document.querySelector("#canvas")
var ctx = dto.getContext("2d")
function timer() {
// 每秒就重新清楚下画布
ctx.clearRect(0, 0, 400, 400)
// 保存当前环境的状态。
ctx.save()
// 将画布的相对点xy移到画布的中心
ctx.translate(200, 200)
// 更改圆心对于的起点坐标，默认在圆心水平处即3点方位，先修改在12点方位，逆90°即可
ctx.rotate(-Math.PI / 2)
// 绘制表盘
ctx.beginPath()
ctx.arc(0, 0, 150, 0, 2 * Math.PI)
ctx.strokeStyle = "#333"
ctx.lineWidth = 10
ctx.stroke()
ctx.closePath()
ctx.save()
// 绘制时针刻度
for (let i = 0; i < 12; i++) {
ctx.rotate(2 * Math.PI / 12)
ctx.beginPath()
ctx.moveTo(130, 0)
ctx.lineTo(150, 0)
ctx.strokeStyle = "#333"
ctx.lineWidth = 5
ctx.stroke()
ctx.closePath()
}
ctx.save()
ctx.restore()
//绘制分针刻度
for (let i = 0; i < 60; i++) {
ctx.rotate(2 * Math.PI / 60)
ctx.beginPath()
ctx.moveTo(140, 0)
ctx.lineTo(150, 0)
ctx.strokeStyle = "#333"
ctx.lineWidth = 2
ctx.stroke()
ctx.closePath()
}
ctx.save()
ctx.restore()
// 获取当前的时分秒
let date = new Date()
let hour = date.getHours()
let min = date.getMinutes()
let sec = date.getSeconds()
hour > 12 ? hour - 12 : hour
sec < 10 ? sec = "0" + sec : sec
let getDate = document.getElementById("date")
getDate.innerHTML = "当前时间为：" + hour + ":" + min + ":" + sec
//绘制时针
ctx.beginPath()
ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 60 / 12 * min + 2 * Math.PI / 60 / 12 / 12 * sec)
ctx.moveTo(0, 0)
ctx.lineTo(80, 0)
ctx.strokeStyle = "#333"
ctx.lineWidth = 5
ctx.stroke()
ctx.closePath()
ctx.save()
ctx.restore()
//绘制分针
ctx.beginPath()
ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) + Math.PI / 2)
ctx.moveTo(-10, 0)
ctx.lineTo(100, 0)
ctx.strokeStyle = "#333"
ctx.lineWidth = 3
ctx.stroke()
ctx.closePath()
ctx.save()
ctx.restore()
//绘制秒针
ctx.beginPath()
ctx.rotate(2 * Math.PI / 60 * sec)
ctx.moveTo(-20, 0)
ctx.lineTo(120, 0)
ctx.strokeStyle = "#333"
ctx.lineWidth = 1
ctx.stroke()
ctx.closePath()
// 绘制圆心
ctx.save()
ctx.restore()
ctx.beginPath()
ctx.arc(0, 0, 5, 0, 2 * Math.PI)
ctx.fillStyle = "red";
ctx.fill()
ctx.closePath()
// 返回之前保存过的路径状态和属性。
ctx.restore()
ctx.restore()
}
setInterval(timer, 1000)
</script>
</html>
对于restore和save的方法，我还有点迷，觉得就是存放当前的状态，
刮刮卡
代码
#main {
width: 400px;
height: 100px;
position: relative;
}
#canvas,
#ggk {
position: absolute;
top: 0;
left: 0;
font-size: 26px;
}
#ggk {
position: absolute;
top: 35px;
left: 150px;
}
</style>
<body>
<div id="main">
<div id="ggk">谢谢惠顾</div>
<canvas id="canvas" width="400" height="100"></canvas>
</div>
<script>
var dto = document.querySelector("#canvas")
var mainDom = document.getElementById("main")
var ggk = document.getElementById("ggk")
var ctx = dto.getContext("2d")
ctx.fillStyle = "#333"
ctx.fillRect(0, 0, 400, 100)
ctx.fillStyle = "#FFF"
ctx.font = "28px Arial";
ctx.fillText("刮刮卡", 150, 50);
isDraw = false
dto.onmousedown = function () {
console.log(isDraw)
isDraw = true
}
// 鼠标移动的绘制圆
dto.onmousemove = function (e) {
console.log(isDraw)
if (isDraw) {
var x = e.pageX - mainDom.offsetLeft
var y = e.pageY - mainDom.offsetTop
ctx.globalCompositeOperation = "destination-out"
ctx.arc(x, y, 20, 0, 2 * Math.PI)
ctx.fill()
}
}
dto.onmouseup = function () {
isDraw = false
}
