html5怎样运用canvas绘制“钟表”图案？（代码实例）--百分百源码网

html5怎样运用canvas绘制“钟表”图案？（代码实例）-

发布时间：09/01 来源：未知浏览：关键词：

本章给大家介绍html5怎样运用canvas绘制“钟表”图案？（代码实例），有一定的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。本章给大家介绍html5怎样运用canvas绘制“钟表”图案？（代码实例），有一定的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

一、介绍Canvas

Canvas 是指定了长度和宽度的矩形画布，我们将运用新的HTML5 JavaScript，可运用HTML5 JS API 来画出各种图形。不外，canvas自身并没有绘制能力（它仅仅是图形的容器） - 您必需运用足原来完成现实的画图任务。

此刻大局部阅读器都支撑canvas，运用canvas前要创建个画布，就是这样

二、Canvas中常用的属性和办法

色彩和样式：

fillStyle 设定或返回用于添补绘画的色彩、渐变或模式
strokeStyle 设定或返回用于笔触的色彩、渐变或模式
shadowColor 设定或返回用于暗影的色彩

矩形：

rect() 新建矩形
fillRect() 绘制“被添补”的矩形
strokeRect() 绘制矩形（无添补）
clearRect() 在给定的矩形内革除指定的像素

途径：

fill() 添补目前画图（途径）
stroke() 绘制已定义的途径
beginPath() 起始一条途径，或重置目前途径
moveTo() 把途径挪移到画布中的指定点，不新建线条
closePath() 新建从目前点回到起始点的途径
lineTo() 增加一个新点，然后在画布中新建从该点到最后指定点的线条
clip() 从原始画布剪切任意外形和尺寸的区域
quadraticCurveTo() 新建二次贝塞尔曲线
bezierCurveTo() 新建三次方贝塞尔曲线
arc() 新建弧/曲线（用于新建圆形或局部圆）
arcTo() 新建两切线之间的弧/曲线
isPointInPath() 要是指定的点位于目前途径中，则返回 true，不然返回 false

文本：

font 设定或返回文本内容的目前字体属性
textAlign 设定或返回文本内容的目前对齐方式
textBaseline 设定或返回在绘制文本时运用的目前文本基线
fillText() 在画布上绘制“被添补的”文本
strokeText() 在画布上绘制文本（无添补）
measureText() 返回包括指定文本宽度的对象

图像绘制：

drawImage() 向画布上绘制图像、画布或视频

三、绘制钟表

第一创建一个html文件，创建画板而且给画板添加些样式，就像这样



	
		
		canvas画布

然后开端操纵canvas

《script》
			//猎取canvas标签，而且新建 context 对象 
			var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				deg = Math.PI / 180;
			context.translate(200, 200);
		《script》

注明：getContext(“2d”) 对象是内建的 HTML5 对象，具有多种绘制途径、矩形、圆形、字符以及增加图像的办法，deg盘算圆周率，translate() 画布的位置。
1.新建表盘、数字、刻度、核心点

新建表盘

context.beginPath();
context.arc(0, 0, 150, 0, 360 * deg);
context.lineWidth = 3;
context.stroke();
context.closePath();

新建数字

//新建数字
for (var i = 1; i <= 12; i++) {
  context.beginPath();
  context.save();
  context.rotate(30 * i * deg);
  context.textAlign = 'center';
  if (i % 3 == 0) {
      context.fillStyle = 'red';
      context.font = "normal 28px arial";
      context.fillText(i, 0, -110);
  } else {
      context.font = "normal 20px arial";
      context.fillText(i, 0, -120);
  }
  context.restore();
  context.closePath();
}

新建刻度

for (var i = 1; i <= 60; i++) {
    context.beginPath();
    context.save();
    context.rotate(6 * i * deg);
    context.moveTo(0, -150);
    //判断刻度显示颜色
    if (i % 15 == 0) {
        context.strokeStyle = 'red';
        context.lineWidth = 3;
        context.lineTo(0, -135);
        context.stroke();
    } else if (i % 5 == 0) {
        context.strokeStyle = 'orange';
        context.lineWidth = 2;
        context.lineTo(0, -140);
        context.stroke();
    } else {
        context.strokeStyle = '#000';
        context.lineWidth = 1;
        context.lineTo(0, -145);
        context.stroke();
    }
    context.restore();
    context.closePath();
}

新建核心点

context.beginPath();
 context.arc(0, 0, 5, 0, 360 * deg);
 context.fill();
 context.closePath();

结果图：

2.新建指针

var nowdate = new Date(),
     hour = nowdate.getHours() % 12,
     minu = nowdate.getMinutes(),
     second = nowdate.getSeconds();
 var ms = nowdate.getMilliseconds(); //毫秒
 //秒针
 context.beginPath();
 context.save();
 context.lineWidth = 1;
 context.strokeStyle = 'red';
 //context.rotate(6*second*deg);
 context.rotate((ms / 1000 + second) * 6 * deg);
 context.moveTo(0, 20);
 context.lineTo(0, -130);
 context.stroke();
 context.restore();
 context.closePath();
 //分针
 context.beginPath();
 context.save();
 context.lineWidth = 2;
 context.strokeStyle = 'orange';
 //context.rotate((second/60+minu)*6*deg);
 context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
 context.moveTo(0, 10);
 context.lineTo(0, -120);
 context.stroke();
 context.restore();
 context.closePath();
 //时针
 context.beginPath();
 context.save();
 context.lineWidth = 3;
 context.strokeStyle = '#000';
 //context.rotate((second/3600+minu/60+hour)*30*deg);
 context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
 context.moveTo(0, 0);
 context.lineTo(0, -110);
 context.stroke();
 context.restore();
 context.closePath();

结果图：

3.最后完成

我们需要把上边的绘制封装成办法，然后不绝的绘制不绝的革除这样钟表就动起来了

function dialPlate() { //新建表盘
    //context.clearRect(-150,-150,400,400);//革除画布
    context.beginPath();
    context.arc(0, 0, 150, 0, 360 * deg);
    context.lineWidth = 3;
    context.stroke();
    context.closePath();
    //新建刻度
    for (var i = 1; i <= 60; i++) {
        context.beginPath();
        context.save();
        context.rotate(6 * i * deg);
        context.moveTo(0, -150);
        if (i % 15 == 0) {
            context.strokeStyle = 'red';
            context.lineWidth = 3;
            context.lineTo(0, -135);
            context.stroke();
        } else if (i % 5 == 0) {
            context.strokeStyle = 'orange';
            context.lineWidth = 2;
            context.lineTo(0, -140);
            context.stroke();
        } else {
            context.strokeStyle = '#000';
            context.lineWidth = 1;
            context.lineTo(0, -145);
            context.stroke();
        }
        context.restore();
        context.closePath();
    }
    //创建数字
    for (var i = 1; i <= 12; i++) {
        context.beginPath();
        context.save();
        context.rotate(30 * i * deg);
        context.textAlign = 'center';
        if (i % 3 == 0) {
            context.fillStyle = 'red';
            context.font = "normal 28px arial";
            context.fillText(i, 0, -110);
        } else {
            context.font = "normal 20px arial";
            context.fillText(i, 0, -120);
        }
        context.restore();
        context.closePath();
    }
    //中心点
    context.beginPath();
    context.arc(0, 0, 5, 0, 360 * deg);
    context.fill();
    context.closePath();
}
function Pointer() { //创建指针
    var nowdate = new Date(),
        hour = nowdate.getHours() % 12,
        minu = nowdate.getMinutes(),
        second = nowdate.getSeconds();
    var ms = nowdate.getMilliseconds(); //毫秒
    //秒针
    context.beginPath();
    context.save();
    context.lineWidth = 1;
    context.strokeStyle = 'red';
    //context.rotate(6*second*deg);
    context.rotate((ms / 1000 + second) * 6 * deg);
    context.moveTo(0, 20);
    context.lineTo(0, -130);
    context.stroke();
    context.restore();
    context.closePath();
    //分针
    context.beginPath();
    context.save();
    context.lineWidth = 2;
    context.strokeStyle = 'orange';
    //context.rotate((second/60+minu)*6*deg);
    context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
    context.moveTo(0, 10);
    context.lineTo(0, -120);
    context.stroke();
    context.restore();
    context.closePath();
    //时针
    context.beginPath();
    context.save();
    context.lineWidth = 3;
    context.strokeStyle = '#000';
    //context.rotate((second/3600+minu/60+hour)*30*deg);
    context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
    context.moveTo(0, 0);
    context.lineTo(0, -110);
    context.stroke();
    context.restore();
    context.closePath();
}
dialPlate();
Pointer();
setInterval(function(){
dialPlate();
Pointer();
},1000/60)

注明：动画每秒施行60次是最佳的，所以按时器才让他没秒施行60次。

以上就是html5怎样运用canvas绘制“钟表”图案？（代码实例）的细致内容，更多请关注百分百源码网其它相干文章！

打赏