-
Demo effect:
HTML代码：
复制代码代码如下所示：
时钟
* {
保证金：0；
填充：0；
}
帆布{。
左：20px保证金；
边距：20px；
border: solid 1px；
}
JS代码：
复制代码代码如下所示：
var画布{ }；
canvas.cxt = document.getelementbyid（'canvasid）。GetContext（二维的）；
画布=点函数（x，y）{
这个；
这个，y = y；
}；
画布上的所有图形擦除
canvas.clearcxt =函数（）{
我=这个；
VaR的画布me.cxt.canvas；
me.cxt.clearrect（0,0，canvas.offsetwidth，帆布。offsetheight）；
}；
时钟 / * * /
画布=时钟=函数（）{
var =画布，
C = me.cxt，
半径= 150， /半径
缩放比例= 20。
minangle =×Math.PI（1 / 30），一弧分* / / *
hourangle =×Math.PI（1 / 6），一个小时的弧度 / * * /
hourhandlength =半径 / 2 / * * /小时
minhandlength =半径 / 3 * 2 / * * /分钟的长度
sechandlength =半径 / 10 * 9 / * * /二手长
中心新=我。点（c.canvas。宽度 / 2，c.canvas。身高 / 2）； / * * /。
画出中心（表盘的中心）
功能drawcenter（）{
C.save（）；
c.translate（中心。X、Y中心。）；
c.fillstyle =；
C.beginPath（）；
C.arc（0, 0，半径 / 20, 0, 2 *数学。PI）；
C.closePath（）；
C.fill（）；
C.stroke（）；
C.restore（）；
}；
通过坐标转换，绘制刻度盘
功能drawbackground（）{
C.save（）；
c.translate（中心。X中心。Y）； / * * /翻译
绘制比例尺
功能drawscale（）{
C.moveTo（半径范围，0）；
C.lineTo（半径0）；
}；
C.beginPath（）；
C.arc（0, 0，半径，0, 2 * Math.PI，真的）；
C.closePath（）；
对于（var i = 1；i < 12；i + +）{
DrawScale（）；
c.rotate（hourangle）； / * * /旋转
}；
渲染时间（3、6、9、12）* / / *
c.font =大胆30px冲击
C.fillText（3
C.fillText（6
C.fillText（9
C.fillText（12
C.stroke（）；
C.restore（）；
}；
顺时针方向移动（当前电流（24小时））。
This.drawHourHand = function (H) {
h＝0＝24：h；
C.save（）；
c.translate（中心。X、Y中心。）；
c.rotate（3 / 2 *数学。PI）；
c.rotate（H * hourangle）；
C.beginPath（）；
C.moveTo（0, 0）；
C.lineTo（hourhandlength，0）；
C.stroke（）；
C.restore（）；
}；
绘制（m：当前）*分钟
this.drawminhand =功能（M）{
m＝0＝60：m；
C.save（）；
c.translate（中心。X、Y中心。）；
c.rotate（3 / 2 *数学。PI）；
c.rotate（m×minangle）；
C.beginPath（）；
C.moveTo（0, 0）；
C.lineTo（minhandlength，0）；
C.stroke（）；
C.restore（）；
}；
第二手绘图（第二部分）。
this.drawsechand =函数（）{
s＝0＝60：s；
C.save（）；
c.translate（中心。X、Y中心。）；
c.rotate（3 / 2 *数学。PI）；
c.rotate（* minangle）；
C.beginPath（）；
C.moveTo（0, 0）；
C.lineTo（sechandlength，0）；
C.stroke（）；
C.restore（）；
}；
根据时钟绘图机的要求
this.drawclock =函数（）{
我=这个；
函数绘图（）{
日期=新日期（）；
Canvas.clearCxt（）；
drawbackground（）；
DrawCenter（）；
me.drawhourhand（date.gethours（）+（）date.getminutes / 60）；
me.drawminhand（date.getminutes（）+（）date.getseconds / 60）；
me.drawsechand（date.getseconds（））；
}
拉（）；
setInterval（画，1000）；
}；
}；
var =函数（）{（）
新时钟（）；
Clock.drawClock（）；
}；
代码涉及几个简单的画布元素API。
以上是本文的全部内容，希望能帮您学习油画。