未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口为了账号安全，请及时绑定邮箱和手机
canvas元素———表盘
canvas元素———表盘
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&canvas id="wrap" width="800" height="800"&&/canvas&
&script type="text/javascript"&
var wrap = document.getElementById('wrap');
var cxt = wrap.getContext("2d");
var timer =
//定义一个方法
function setTime() {
//画一个表盘
cxt.clearRect(0, 0, wrap.width, wrap.height);
cxt.beginPath();
cxt.lineWidth = 10;
cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
cxt.strokeStyle = "#FF0000";
cxt.fillStyle = "aqua";
cxt.stroke();
cxt.fill();
//循环将12个粗刻度画到表盘中
for(var i = 0; i & 12; i++) {
cxt.beginPath();
cxt.lineWidth = 10;
cxt.moveTo(300, 300);
cxt.lineTo(Math.cos((i * 30) / 180 * Math.PI) * 200 + 300, (-Math.sin((i * 30) / 180 * Math.PI) * 200 + 300));
cxt.stroke();
//循环将60个秒刻度画到表盘中
for(var i = 0; i & 60; i++) {
cxt.beginPath();
cxt.lineWidth = 2;
cxt.moveTo(300, 300);
cxt.lineTo(Math.cos((i * 6) / 180 * Math.PI) * 200 + 300, (-Math.sin((i * 6) / 180 * Math.PI) * 200 + 300));
cxt.stroke();
//画一个小圆，将刻度线条覆盖
cxt.beginPath();
cxt.lineWidth = 10;
cxt.arc(300, 300, 180, 0, 2 * Math.PI, false);
cxt.strokeStyle = "#FF0000";
cxt.fillStyle = "aqua";
cxt.stroke();
cxt.fill();
//在表盘中写入数字
cxt.beginPath();
cxt.lineWidth = 2;
var clg = cxt.createLinearGradient(500, 400, );
clg.addColorStop(1, "red");
cxt.fillStyle =
for(var i = 0; i & 12; i++) {
cxt.font = " 16px Arial ";
cxt.fillText(i + 1, Math.cos((i * 30 + 300) / 180 * Math.PI) * 150 + 300, (Math.sin((i * 30 + 300) / 180 * Math.PI) * 150 + 300));
cxt.stroke();
//创建当前Date对象
nowTime = new Date();
hour = nowTime.getHours();
minute = nowTime.getMinutes();
second = nowTime.getSeconds();
var hoursDeg, minutesD
//当前时，分，秒
hourDeg = -90 + (360 / 60 * 5) / 60 * minute + (360 / 12 * hour);
minuteDeg = -90 + (360 / 60 * minute) + ((360 / 60) / 60 * second);
secondDeg = -90 + 360 / 60 *
//在表盘上 时，分，秒针画圆
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle = "red";
cxt.moveTo(300, 300);
cxt.arc(300, 300, 80, hourDeg * Math.PI / 180, hourDeg * Math.PI / 180, false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth = 2;
cxt.strokeStyle = "blueviolet";
cxt.moveTo(300, 300);
cxt.arc(300, 300, 200, secondDeg * Math.PI / 180, secondDeg * Math.PI / 180, false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth = 5;
cxt.strokeStyle = "blue";
cxt.moveTo(300, 300);
cxt.arc(300, 300, 150, minuteDeg * Math.PI / 180, minuteDeg * Math.PI / 180, false);
cxt.stroke();
setTime();
timer = setInterval(setTime, 1000);
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
这位童鞋很懒，什么也没有留下～～！
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2了解touch事件，用canvas做画板
触摸事件&&
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart：手指放在一个DOM元素上。
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches：当前位于屏幕上的所有手指的一个列表。
2. targetTouches：位于当前DOM元素上的手指的一个列表。
changedTouches：涉及当前事件的手指的一个列表。【这三个列表的区别会在后面讲解，那是个老外的文章，讲的比较清楚。】
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
2. target：DOM元素，是动作所针对的目标。
3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。
可触控应用&&
换了触摸屏幕，这样调试起来比较方便了。上一张截图。
touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势，比如说捏缩放、旋转等待。
下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素：
var obj = document.getElementByIdx_x_x_x('id');
obj.addEventListener('touchmove', function(event) {
&& // 如果这个元素的位置内只有一个手指的话
(event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX + 'px';
obj.style.top = touch.pageY + 'px';
}, false);
下面是一个示例，该例子显示了屏幕上当前所有的触点，它的作用就是用来感受一下设备的响应性。
// 设置画布并通过ctx变量来暴露上下文
canvas.addEventListener('touchmove', function(event) {
(var i = 0; i & event.touches. i++) {
touch = event.
&&&&&&ctx.beginPath();
&&&&&&ctx.arc(touch.pageX,
touch.pageY, 20, 0, 2*Math.PI, true);
&&&&&&ctx.fill();
&&&&&&ctx.stroke();
&&}, false);
不如去看看下面这个例子~ 绘画板！
&canvas id="example" height="450" width="922"
style=""&&/canvas&
&&&&&&&&&&
var CanvasDrawr = function(options) {
//&这个是设定画布信息
canvas = document.getElementByIdx_x_x_x(options.id),
ctxt = canvas.getContext("2d");
canvas.style.width = '100%'
&&& canvas.width
= canvas.offsetW
canvas.style.width = '';
设定来自options的属性
ctxt.lineWidth = options.size || Math.ceil(Math.random() *
&&& ctxt.lineCap
= options.lineCap || "round";
&&& ctxt.pX =
&&& ctxt.pY =
&&& var lines
&&& var offset =
$(canvas).offset();
&&& var self =
//初始化，绑定touchstart 和 touchmove 事件
init: function()
&&&&&&&&&&&
canvas.addEventListener('touchstart', self.preDraw, false);
&&&&&&&&&&&
canvas.addEventListener('touchmove', self.draw,
false);&&&&&&&&&&&&
preDraw: function(event) {//当touchstart时，获取相对canvas的x\y位置，画笔的颜色
&&&&&&&&&&&
$.each(event.touches, function(i, touch) {
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
= touch.identifier,
&&&&&&&&&&&&&&&&&&&
colors& = ["red", "green", "yellow", "blue",
"magenta", "orangered"],
&&&&&&&&&&&&&&&&&&&
mycolor = colors[Math.floor(Math.random() * colors.length)];
&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
lines[id] = {
: this.pageX - offset.left,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
: this.pageY - offset.top,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
color : mycolor
&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&
&&&&&&&&&&&
event.preventDefault();
draw: function(event) {//touchmove开始划线
&&&&&&&&&&&
var e = event, hmm = {};
&&&&&&&&&&&
$.each(event.touches, function(i, touch) {
&&&&&&&&&&&&&&&
var id = touch.identifier,
&&&&&&&&&&&&&&&&&&&
moveX = this.pageX - offset.left - lines[id].x,
&&&&&&&&&&&&&&&&&&&
moveY = this.pageY - offset.top - lines[id].y;//移动的x\y
&&&&&&&&&&&&&&&
var ret = self.move(id, moveX, moveY);//canvas的画线
&&&&&&&&&&&&&&&
lines[id].x = ret.x;
&&&&&&&&&&&&&&&
lines[id].y = ret.y;
&&&&&&&&&&&
&&&&&&&&&&&
event.preventDefault();
move: function(i, changeX, changeY)
{//这个地方需要了解下canvas&的知识哦。
&&&&&&&&&&&
ctxt.strokeStyle = lines[i].//设定颜色
&&&&&&&&&&&
ctxt.beginPath();//开始路径
&&&&&&&&&&&
ctxt.moveTo(lines[i].x, lines[i].y);//移动到
&&&&&&&&&&&
ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);//画线
&&&&&&&&&&&
ctxt.stroke();//填充颜色
&&&&&&&&&&&
ctxt.closePath();//结束路径
&&&&&&&&&&&
return { x: lines[i].x + changeX, y: lines[i].y + changeY
};//返回最后的点坐标
&&& return
self.init();//运行init
$(function(){
super_awesome_multitouch_drawing_canvas_thingy = new
CanvasDrawr({id:"example", size: 15 });
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。玩转html5（4）-使用canvas画一个时钟（可以动的哦！） - HTML/CSS当前位置:& &&&玩转html5（4）-使用canvas画一个时钟（可以动的哦玩转html5（4）-使用canvas画一个时钟（可以动的哦！）&&网友分享于：&&浏览：2次玩转html5（四）----使用canvas画一个时钟（可以动的哦！）先给个效果图，我画的比较丑，大家可以自己美化一下，
直接上代码：
&!DOCTYPE html&
&meta charset=&utf-8&&
width=&500& height=&500& id=&clock& &
您的浏览器不支持canvas
//获取画布
var clock=document.getElementById('clock');
//设置绘图环境
var cxt=clock.getContext('2d');
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
//获取时间，
var now =new Date();
var second =now.getSeconds();
var minute =now.getMinutes();
var hour1 =now.getHours();
//将24小时进制转为12小时，且为浮点型
var hour=hour1+minute/60;
hour=hour&12 ?hour-12:
//获取全部时间
var time=now.toLocaleString( );
//开始新路径
cxt.beginPath();
cxt.lineWidth=8;
cxt.strokeStyle=&blue&;
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//刻度,利用旋转
for(var i=0;i&12;i++){
//保存当前状态
cxt.save();
//刻度粗细
cxt.lineWidth=5;
//刻度颜色
cxt.strokeStyle=&black&
//设置00点,以画布中心为00
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
//刻度起始点
cxt.moveTo(0,-180);
//刻度结束点
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
//将旋转后的图片返回原画布
cxt.restore();
for(var i=0;i&60;i++){
//保存当前状态
cxt.save();
//刻度粗细
cxt.lineWidth=3;
//刻度颜色
cxt.strokeStyle=&black&
//设置00点,以画布中心为00
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-188);
cxt.lineTo(0,-195);
cxt.closePath();
cxt.stroke();
//将旋转后的图片返回原画布
cxt.restore();
//表盘中心
cxt.beginPath();
cxt.lineWidth=1;
cxt.strokeStyle=&red&;
cxt.fillStyle=&red&;
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//保存当前状态
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle=&black&;
//设置异次元空间00点
cxt.translate(250,250);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-120);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
cxt.save();
cxt.lineWidth=&3&;
cxt.strokeStyle=&black&;
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
cxt.save();
cxt.lineWidth=&1.5&;
cxt.strokeStyle=&red&;
cxt.translate(250,250);
cxt.rotate(second*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//秒针前端小点
cxt.beginPath();
//外环为红色
cxt.strokeStyle=&red&;
//灰色填充
cxt.fillStyle=&gray&;
cxt.arc(0,-145,4,0,360,false);
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.restore();
//表盘中心
cxt.beginPath();
cxt.lineWidth=1;
//外环为红色
cxt.strokeStyle=&red&;
//灰色填充
cxt.fillStyle=&gray&;
//路径函数 x,y,r,角度范围,顺时针/逆时针
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.font=&15px 黑体 &;
cxt.fillStyle=&black&;
cxt.fillText(time,160,150);
//使用setInterval(代码，毫秒时间)使时钟转起来;
drawClock();
setInterval(drawClock,1000);
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有