个人中心
gpt4 book ai didi

利用H5api实现时钟的绘制(javascript)

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 35 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章利用H5api实现时钟的绘制(javascript)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

HTML5的canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，canvas元素本身并没有绘制能力（它仅仅是图形的容器）必须使用脚本来完成实际的绘图任务.

下面，具体总结了一下使用画布canvas的步骤:

画布:

canvas 。

在页面上规划出一块空间，canvas标签，通过javascript控制画布完成绘制 。

1.获取画布 。

?
1
var canvas=document.getElementById( "" );

2.获取上下文对象 （获取画笔） 。

?
1
var cx=canvas.getContext(“2d”);

3.设置画笔样式 。

?
1
2
cx.fillStyle=‘red ';
cx.strokeStyle=‘blue' ;

4.开始绘制 。

下面是对于canvas使用，绘制一个简单钟表的小例子:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  < title >Document</ title >
  < script >
  window.onload=function(){
   //1.获取画布
   var canvas=document.getElementById("canvas");
   //2.获取画笔
   var cx=canvas.getContext("2d");
  
   function clock(){
   //3.设置画笔样式
   cx.fillStyle="orange";
   //4.绘制图形
   //绘制表盘
   cx.beginPath();
   cx.arc(300,300,200,0,Math.PI*2)
   cx.closePath();
   cx.fill();
   //绘制时刻度
   cx.lineWidth=2;
   cx.strokeStyle="black";
   for(var i=0;i< 12 ;i++){
    cx.save();
    cx.translate(300,300);
    cx.rotate(i*(Math.PI/6));
    // cx.beginPath();
    cx.moveTo(0,-180);
    cx.lineTo(0,-200);
    // cx.closePath();
    cx.stroke();
    cx.fillStyle = "black" ;
    cx.font = "16px blod" ;
    cx.rotate(Math.PI/6)
    cx.fillText(i+1,-5,-220);
    cx.restore();
   }
   //绘制分刻度
   for(var i = 0 ;i<60;i++){
    cx.save();
    cx.translate(300,300);
    cx.rotate(i*(Math.PI/30));
    cx.beginPath();
    cx.moveTo(0,-190);
    cx.lineTo(0,-200);
    cx.closePath();
    cx.stroke();
    cx.restore();
   }
   //获取当前时间
   var today = new Date();
   var hour = today .getHours();
   var min = today .getMinutes();
   var sec = today .getSeconds();
   hour =hour+min/60;
   //绘制时针
   cx.lineWidth = 5 ;
   cx.save();
   cx.beginPath();
   cx.translate(300,300);
   cx.rotate(hour*(Math.PI/6));
   cx.moveTo(0,10);
   cx.lineTo(0,-100);
   cx.closePath();
   cx.stroke();
   cx.restore();
   //绘制分针
   cx.lineWidth = 3 ;
   cx.save();
   cx.beginPath();
   cx.translate(300,300);
   cx.rotate(min*(Math.PI/30));
   cx.moveTo(0,10);
   cx.lineTo(0,-120);
   cx.closePath();
   cx.stroke();
   cx.restore();
   //绘制秒针
   cx.lineWidth = 1 ;
   cx.strokeStyle = "red" ;
   cx.save();
   cx.beginPath();
   cx.translate(300,300);
   cx.rotate(sec*(Math.PI/30));
   cx.moveTo(0,10);
   cx.lineTo(0,-160);
   cx.closePath();
   cx.stroke();
   cx.restore();
   //绘制交叉处
   cx.fillStyle = "#ccc" ;
   cx.strokeStyle = "red" ;
   cx.save();
   cx.translate(300,300);
   cx.beginPath();
   cx.arc(0,0,5,0,Math.PI*2);
   cx.closePath();
   cx.fill();
   cx.stroke();
   cx.restore();
    setTimeout(clock,1000);
   }
   clock()
  }
  </script>
</ head >
< body >
  < canvas id = "canvas" width = "600px" height = "600px" style = "background-color: #ccc;" ></ canvas >
</ body >
</ html >

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_44359232/article/details/108506676 。

最后此篇关于利用H5api实现时钟的绘制(javascript)的文章就讲到这里了,如果你想了解更多关于利用H5api实现时钟的绘制(javascript)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

35 4 0
文章推荐： 如何打造一个会赚钱的淘宝客博客
文章推荐： 浅谈find命令下的atime,ctime,mtime
文章推荐： 站长们：先静下心来把用户体验做好
文章推荐： Vue-router中hash模式与history模式的区别详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com