时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
1000px;
text-align: center;
margin: 50px auto;
}
#can{
background-color: #abcdef;
}
</style>
</head>
<body>
<div>
<canvas width="600" height="400" id="can"></canvas>
</div>
<script>
var can = document.getElementById('can');
var ctx = can.getContext('2d');
function clock(){
ctx.beginPath();
ctx.lineWidth = '5'
ctx.strokeStyle = '#000'
ctx.arc(300,200,150,0,Math.PI*2)
ctx.closePath();
ctx.stroke();
var n = 0,m = 180;
for(var i = 0;i < 30;i++){
if(n % 30 == 0){
ctx.lineWidth = '5'
}else{
ctx.lineWidth = '1'
}
ctx.beginPath();
ctx.moveTo(300+Math.sin(Math.PI/180*n)*150,200+Math.cos(Math.PI/180*n)*150)
ctx.lineTo(300+Math.sin(Math.PI/180*m)*150,200+Math.cos(Math.PI/180*m)*150)
ctx.closePath();
ctx.stroke();
n += 6;
m += 6;
}
ctx.beginPath();
ctx.arc(300,200,125,0,Math.PI*2)
ctx.closePath();
ctx.fillStyle = '#abcdef'
ctx.fill();
ctx.beginPath();
ctx.lineWidth = '5'
ctx.arc(300,200,3,0,Math.PI*2)
ctx.closePath();
ctx.stroke();
//时针
var date = new Date()
ctx.beginPath();
ctx.strokeStyle = '#ff0'
ctx.moveTo(300,200)
var h = date.getHours();
h >= 12? h -= 12:h;
var hs = date.getSeconds()+date.getMinutes()*60+h*3600
ctx.lineTo(300+Math.sin(Math.PI/180*(0+hs/120))*75,
200+Math.cos(Math.PI/180*(180-hs/120))*75)
ctx.closePath();
ctx.stroke();
//分针
ctx.beginPath();
ctx.strokeStyle = '#00f'
ctx.lineWidth = '3'
ctx.moveTo(300,200)
var m = date.getSeconds()+date.getMinutes()*60;
ctx.lineTo(300+Math.sin(Math.PI/180*(0+m/10))*100,
200+Math.cos(Math.PI/180*(180-m/10))*100)
ctx.closePath();
ctx.stroke();
//秒针
ctx.beginPath();
ctx.strokeStyle = '#f00'
ctx.lineWidth = '1'
ctx.moveTo(300,200)
var s = date.getSeconds()
ctx.lineTo(300+Math.sin(Math.PI/180*(0+6*s))*120,
200+Math.cos(Math.PI/180*(180-6*s))*120)
ctx.closePath();
ctx.stroke();
ctx.fillStyle = '#000'
ctx.textBaseline = 'top'
ctx.font = '30px sans-serif'
ctx.fillText('12',280,75)
ctx.fillText('6',290,300)
ctx.fillText('9',180,190)
ctx.fillText('3',400,190)
}
clock();
setInterval(function(){
clock();
},1000)
</script>
</body>
</html>
验证码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
text-align: center;
}
canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas width="200" height="100" id="can"></canvas>
<script>
var can = document.getElementById('can')
var ctx = can.getContext('2d');
function fun(){
var arr = []
for(var i = 0,array=[];i < 3;i++){
var n = Math.ceil(Math.random()*255)
if(n > 127){
arr[i] = n
}else{
i --
}
}
can.style.backgroundColor = 'rgb('+arr[0]+','+arr[1]+','+arr[2]+')'
function getCode(){
var chars = [];
var code = [];
for(var i = 0;i <= 9;i++){
chars[chars.length] = i;
}
for(var j = 65;j <= 90;j++){
chars[chars.length] = String.fromCharCode(j);
}
for(var j = 97;j <= 122;j++){
chars[chars.length] = String.fromCharCode(j);
}
for(var m = 0; m <4;m++){
var num = parseInt(Math.random()*62 - m - 1);
code[code.length] = chars.splice(num,1);
}
return code;
}
var num = getCode();
ctx.font = '30px sans-serif'
ctx.textBaseline = 'top';
for(var j = 0;j < 4;j++){
for(var i = 0; i < 2;i++){
arr[0] = Math.ceil(Math.random()*(200-ctx.measureText(num[j]).width))
arr[1] = Math.ceil(Math.random()*(100-10))
}
ctx.save();
ctx.translate(arr[0],arr[1])
for(var i = 0,array=[];i < 3;i++){
var n = Math.ceil(Math.random()*255)
if(n < 127){
array[i] = n
}else{
i --
}
}
ctx.fillStyle = 'rgb('+array[0]+','+array[1]+','+array[2]+')'
ctx.rotate(Math.ceil(Math.random()*180) * Math.PI/180);
ctx.fillText(num[j],-ctx.measureText(num[j]).width/2,-10)
ctx.restore();
}
for(var m = 0; m < 5;m++){
var x = Math.ceil(Math.random()*200)
var y = Math.ceil(Math.random()*100)
var x0 = Math.ceil(Math.random()*200)
var y0 = Math.ceil(Math.random()*100)
ctx.beginPath()
for(var i = 0,ar=[];i < 3;i++){
var n = Math.ceil(Math.random()*255)
if(n < 127){
ar[i] = n
}else{
i --
}
}
ctx.strokeStyle = 'rgb('+ar[0]+','+ar[1]+','+ar[2]+')'
ctx.moveTo(x,y)
ctx.lineTo(x0,y0)
ctx.closePath()
ctx.stroke()
}
for(var m = 0; m <50;m++){
var x = Math.ceil(Math.random()*200)
var y = Math.ceil(Math.random()*100)
ctx.beginPath()
for(var i = 0,a=[];i < 3;i++){
var n = Math.ceil(Math.random()*255)
if(n > 127){
ar[i] = n
}else{
i --
}
}
ctx.fillStyle = 'rgb('+ar[0]+','+ar[1]+','+ar[2]+')'
ctx.arc(x,y,2,0,Math.PI*2)
ctx.fill();
ctx.closePath();
}
}
fun();
can.onclick = function(){
ctx.clearRect(0,0,200,100)
fun();
}
</script>
</body>
</html>