如何使用html5的画布画出时钟

代码：

var clock=documentgetElementById("clock");

var cxt=clockgetContext("2d");

function drawNow(){

var now=new Date();

var hour=nowgetHours();

var min=nowgetMinutes();

var sec=nowgetSeconds();

hour=hour>12hour-12:hour;

hour=hour+min/60;

//表盘(蓝色)

cxtlineWidth=10;

cxtstrokeStyle="blue"

cxtbeginPath();

cxtarc(250,250,200,0,360,false);

cxtclosePath();

cxtstroke();

//刻度

//时刻度

for(var i=0;i<12;i++){

cxtsave();

cxtlineWidth=7;

cxtstrokeStyle="black";

cxttranslate(250,250);

cxtrotate(i30MathPI/180);//旋转角度 角度MathPI/180=弧度

cxtbeginPath();

cxtmoveTo(0,-170);

cxtlineTo(0,-190);

cxtclosePath();

cxtstroke();

cxtrestore();

}

//分刻度

for(var i=0;i<60;i++){

cxtsave();

//设置分刻度的粗细

cxtlineWidth=5;

//重置画布原点

cxttranslate(250,250);

//设置旋转角度

cxtrotate(i6MathPI/180);

//画分针刻度

cxtstrokeStyle="black";

cxtbeginPath();

cxtmoveTo(0,-180);

cxtlineTo(0,-190);

cxtclosePath();

cxtstroke();

cxtrestore();

}

//时针

cxtsave();

// 设置时针风格

cxtlineWidth=7;

cxtstrokeStyle="black";

cxttranslate(250,250);

cxtrotate(hour30MathPI/180);

cxtbeginPath();

cxtmoveTo(0,-140);

cxtlineTo(0,10);

cxtclosePath();

cxtstroke();

cxtrestore();

//分针

cxtsave();

cxtlineWidth=5;

cxtstrokeStyle="black";

//设置异次元空间分针画布的中心

cxttranslate(250,250);

cxtrotate(min6MathPI/180);

cxtbeginPath();

cxtmoveTo(0,-160);

cxtlineTo(0,15);

cxtclosePath();

cxtstroke()

cxtrestore();

//秒针

cxtsave();

//设置秒针的风格

//颜色:红色

cxtstrokeStyle="red";

cxtlineWidth=3;

//重置原点

cxttranslate(250,250);

//设置角度

//cxtrotate(330MathPI/180);

cxtrotate(sec6MathPI/180);

cxtbeginPath();

cxtmoveTo(0,-170);

cxtlineTo(0,20);

cxtclosePath();

cxtstroke();

//画出时针,分针,秒针的交叉点

cxtbeginPath();

cxtarc(0,0,5,0,360,false);

cxtclosePath();

//设置填充

cxtfillStyle="gray";

cxtfill();

//cxtstrokeStyle="red";

cxtstroke();

//画出秒针的小圆点

cxtbeginPath();

cxtarc(0,-140,5,0,360,false);

cxtclosePath();

//设置填充

cxtfillStyle="gray";

cxtfill();

//cxtstrokeStyle="red";

cxtstroke();</p>

<p> cxtrestore();</p>

<p>}

function drawClock(){

cxtclearRect(0,0,500,500);

drawNow();

}

drawNow();

setInterval(drawClock,1000);

建议你这样试试看：

搜索意派Epub360，进入官网，注册登录；

点击右上角的工作台，在工作台点左侧的“+”号创建一个新的作品；

在画布里添加元素，点击元素可以添加动画、交互触发行为；

做好后就是点击左上角的发布的按钮，设置封面、标题、描述，点击保存，发布即可。

这样做的好处：可以快速有效的制作专业炫酷的H5页面。

注意事项：尽量使用谷歌浏览器制作

可以采用了node工具。

做一个基本的矢量数据处理工具，方便后期数据生产较为自动化，选用nodejs作为批量数据处理的脚本工具，暴露服务接口，前端调用，canvas按照图层要素渲染。

Rapha_l是一个小型JavaScript库，可以简化网络上矢量图形的工作。例如，如果要创建自己的特定图表或图像裁剪并旋转窗口小部件，则可以使用此库轻松轻松地实现它。Rapha_l使用SVGW3C建议书和VML作为创建图形的基础。这意味着您创建的每个图形对象也是DOM对象，因此您可以附加JavaScript事件处理程序或稍后对其进行修改。拉斐尔(Rapha_l)的目标是提供一种适配器，使跨矢量浏览器的图形矢量艺术兼容且容易。

以上就是关于如何使用html5的画布画出时钟全部的内容，包括:如何使用html5的画布画出时钟、微信上的h5页面是怎么制作的、H5画布怎么转换成矢量图 js等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！