JS+Canvas绘制动态时钟效果
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#mycanvas{
position: absolute;
left:50%;
margin-left:-250px;
border:5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background-color: rgb(58, 179, 255);
}
</style>
</head>
<body>
<!--
canvas：html5新增的画布对象，可以在其中绘制任何的图形，以及线条效果，包括图片
注意canvas的尺寸应该通过元素的属性直接设置，而不是使用样式实现(失帧)
-->
<canvas id="mycanvas" width="500px" height="500px">您的浏览器太low了,请切换</canvas>
<script>
//获取画布对象
var mycanvas = document.getElementById('mycanvas');
//获取一个2d绘图环境（拿到一支画笔）
var ctx = mycanvas.getContext('2d');
function draw(){
//获取系统时间
var nowTime = new Date();
var hours = nowTime.getHours();//获取时
var minutes = nowTime.getMinutes();//获取分
var seconds = nowTime.getSeconds();//获取秒
//防止小时超过12
hours = hours > 12 "_blank" href="https://www.jb51.net/Special/753.htm">JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：javascript实现电脑和手机版样式切换