如何绘制精美时钟Canvas

最新推荐文章于 2022-05-11 19:24:55 发布

小暗侠

最新推荐文章于 2022-05-11 19:24:55 发布

阅读量379

点赞数

文章标签： canvas 零基础时钟

本文链接：https://blog.csdn.net/qq_23924959/article/details/53326831

版权

如何绘制精美时钟Canvas

绘制时钟Canvas需要的知识点

getContext()

getContext()判断浏览器是否支持canvas，可以通过canvas的getContext()方法来查看是否成功获取对象。我们用的最基本的绘图环境在canvas中绘图，通过调用canvas对象的getContext()方法来获取绘图环境。getContext()方法只需要一个参数：绘图环境的类型。在游戏中，我们使用2D类型的绘图环境。

save()

save()保存当前环境的状态

restore()

restore()返回之前保存过的路径状态和属性

translate()

translate(x,y) 方法重新映射画布上的 (x,y) 位置

beginPath()

beginPath() 方法开始一条路径，或重置当前的路径

Rotate

rotate(弧度) 方法旋转当前的绘图

lineWidth

lineWidth 属性设置或返回当前线条的宽度，以像素计

lineCap

lineCap 属性设置或返回线条末端线帽的样式。属性值Round，向线条的每个末端添加圆形线帽。

moveTo()

moveTo(x,y)把路径移动到画布中的指定点，不创建线条。开始点。

lineTo()

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条。指向点。

arc()

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

arc(圆的中心的 x 坐标，圆的中心的 y 坐标，圆的半径，（起始角，以弧度计，弧的圆形的三点钟位置是 0 度），结束角，以弧度计，（False = 顺时针/true = 逆时针）)

stroke()

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义或其它已定义的路径。默认颜色是黑色

fillStyle

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

fill()

fill() 方法填充当前的图像（路径）。默认颜色是黑色.

textBaseline

textBaseline 属性设置或返回在绘制文本时的当前文本基线。属性值有top,middle,bottom。fillText() 或 strokeText() 方法在画布上定位文本时，将使用指定的 textBaseline 值

Arr.foreach

Arr.foreach(function(数组元素值变量，数组元素索引变量){})

Sin()、Cos()

Sin(x)、Cos(x)方法可返回一个数字的整数，传入的值是角度所对应的弧度。弧长=弧度*半径，一个圆的弧长=2πr.要使用Math计算相应的值

fillText()

fillText(在画布上输出的文本,文本的 x 坐标位置，文本的 y 坐标位置,允许的最大文本宽度，以像素计) 方法在画布上绘制填色的文本。文本的默认颜色是黑色

New Date()

New Date()返回getHours,getMinutes,getSeconds

setInterval()

setInterval(要调用的函数或要执行的代码串,周期性执行或调用 code 之间的时间间隔，以毫秒计) 。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

案例绘制时钟Canvas

Index.html代码

<!DOCTYPE html>

<html>

<head>

div{

margin-top: 100px;

text-align: center;

}

#clock{

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

Js 文件代码

var clock=document.getElementById('clock');

var ctx=clock.getContext('2d');

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r=width/2;

var rem=width/300;

function drawBackground(){

ctx.save();

ctx.translate(r,r);

ctx.beginPath();

ctx.lineWidth=10*rem;

ctx.arc(0,0,r-5*rem,0,2*Math.PI,false);

ctx.stroke();

var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

ctx.font=18*rem + 'px arial';

ctx.textAlign='center';

ctx.textBaseline='middle';

hourNumbers.forEach(function(number,i){

var rad=2*Math.PI/12*i;

var x=Math.cos(rad)*(r-30*rem);

var y=Math.sin(rad)*(r-30*rem);

ctx.fillText(number,x,y);

})

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

var rad=2*Math.PI/60*i;

var x=Math.cos(rad)*(r-18*rem);

var y=Math.sin(rad)*(r-18*rem);

ctx.beginPath();

if (i%5==0) {

ctx.fillStyle='#000';

ctx.arc(x,y,2*rem,0,2*Math.PI,false);

} else{

ctx.fillStyle='#CCCCCC';

ctx.arc(x,y,2*rem,0,2*Math.PI,false);

}

ctx.fill();

}

function drawHours(hour,minute){

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/12*hour;

var mrad=2*Math.PI/12/60*minute;

ctx.rotate(rad+mrad);

ctx.lineWidth=6*rem;

ctx.lineCap='round';

ctx.moveTo(0,10*rem);

ctx.lineTo(0,-r/2);

ctx.stroke();

ctx.restore();

}

function drawMinutes(minute){

ctx.save();

ctx.beginPath();

var mrad=2*Math.PI/60*minute;

ctx.rotate(mrad);

ctx.lineWidth=3*rem;

ctx.lineCap='round';

ctx.moveTo(0,10*rem);

ctx.lineTo(0,-r+30*rem);

ctx.stroke();

ctx.restore();

}

function drawSeconds(second){

ctx.save();

ctx.beginPath();

ctx.fillStyle='#c14543';

var srad=2*Math.PI/60*second;

ctx.rotate(srad);

ctx.lineWidth=3*rem;

ctx.lineCap='round';

ctx.moveTo(-2*rem,15*rem);

ctx.lineTo(2*rem,15*rem);

ctx.lineTo(1*rem,-r+18*rem);

ctx.lineTo(-1*rem,-r+18*rem);

ctx.fill();

ctx.restore();

}

function drawDot(){

ctx.save();

ctx.beginPath();

ctx.arc(0,0,2*rem,0,2*Math.PI,false);

ctx.fillStyle='#fff';

ctx.fill();

ctx.restore();

}

function draw(){

ctx.clearRect(0,0,width,height);

var now=new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

drawBackground();

drawHours(hour,minute);

drawMinutes(minute);

drawSeconds(second);

drawDot();

ctx.restore();

}

draw();

setInterval(draw,1000);

效果：

扩展知识点

strokeStyle

strokeStyle 设置或返回笔触线条的颜色、渐变或模式

fillStyle

fillStyle设置或返回填充区域的颜色、渐变或模式

createLinearGradient()

createLinearGradient(渐变开始x位置，渐变开始y位置，渐变结束x位置，渐变结束y位置)创建线性渐变（用在画布内容上）

createRadialGradient

createRadialGradient(x0,y0,开始圆的半径,x1,y1,结束圆的半径)

addColorStop()

addColorStop(介于 0.0 与 1.0 之间的值表示渐变中开始与结束之间的位置,在结束位置显示的 CSS 颜色值) 方法规定 gradient 对象中的颜色和位置。

globalAlpha

globalAlpha,属性值表示透明图取0~1

ctx.globalAlpha=0.2

定义从黑到红到白的的渐变，作为矩形的填充样式：

var my_gradient=ctx.createLinearGradient(0,0,170,0);

my_gradient.addColorStop(0,"black");//

my_gradient.addColorStop(0.5,"red");

my_gradient.addColorStop(1,"white");

ctx.fillStyle=my_gradient;

拓展：

自己制作的手表

小暗侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何绘制精美时钟Canvas

如何绘制精美时钟Canvas 绘制时钟Canvas需要的知识点getContext()getContext()判断浏览器是否支持canvas，可以通过canvas的getContext()方法来查看是否成功获取对象。我们用的最基本的绘图环境在canvas中绘图，通过调用canvas对象的getContext()方法来获取绘图环境。getContext()方法只需要一个参数：绘图环境
复制链接

扫一扫