帆布 钟面
第二部分 - 画一个钟面
时钟需要钟面。创建一个 JavaScript 函数来绘制钟面：
JavaScript的：
函数 drawClock() {
drawFace（ctx，半径）；
}
函数 drawFace(ctx，radius) {
毕业典礼；
ctx.beginPath()；
ctx.arc(0, 0, 半径, 0, 2 * Math.PI);
ctx.fillStyle ='白色';
ctx.填充()；
grad = ctx.createRadialGradient(0, 0,半径* 0.95, 0, 0, 半径* 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5，'白色');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.线宽 = 半径*0.1;
ctx. 描边();
ctx.beginPath()；
ctx.arc(0, 0, 半径 * 0.1, 0, 2 * Math.PI);
ctx.填充样式 = '#333';
ctx.填充()；
}
亲自尝试 »
代码解释
创建一个 drawFace() 函数来绘制钟面：
函数 drawClock() {
drawFace（ctx，半径）；
}
函数 drawFace(ctx，radius) {
}
绘制白色圆圈：
ctx.beginPath()；
ctx.arc(0, 0, 半径, 0, 2 * Math.PI);
ctx.fillStyle ='白色';
ctx.填充()；
创建径向渐变（原始时钟半径的 95％ 和 105％）：
grad = ctx.createRadialGradient(0, 0, 半径* 0.95, 0, 0, 半径* 1.05);
创建 3 个颜色停止点，分别与圆弧的内边缘、中边缘和外边缘相对应：
grad.addColorStop(0, '#333');
grad.addColorStop(0.5，'白色');
grad.addColorStop(1, '#333');
颜色停止创造了一种 3D 效果。
将渐变定义为绘图对象的描边样式：
ctx.strokeStyle = grad;
定义绘图对象的线宽（半径的10％）：
ctx.线宽 = 半径 * 0.1;
画圆：
ctx. 描边();
绘制时钟中心：
ctx.beginPath()；
ctx.arc(0, 0, 半径 * 0.1, 0, 2 * Math.PI);
ctx.填充样式 = '#333';
ctx.填充()；
