- 浏览: 1824474 次
文章分类
最新评论
-
coosummer:
推荐使用http://buttoncssgenerator.c ...
CSS控制<a>标签变为button -
Allen_J_Will:
哥们,事情没有你说的那么简单,很大的一个项目中,依赖jar包的 ...
struts中java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/TextUtils的解决办法
使用HTML5的canvas做一个会动的时钟
HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的概念和方式,然后来做一个应用吧。
我们做所有的画之情需要一个画布,html的canvas标签就是帮我们声明了一个画布。
- <canvasid="mycanvas">
- </canvas>
首先要实例化这个画布
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- $.log(canvas.width);
- $.log(canvas.height);
- varcontext=canvas.getContext("2d");
- $.log(context.canvas);
- $.log(context.fillStyle);//要填充的区域的颜色
- $.log(context.strokeStyle);//要绘制的线条的颜色
- $.log(context.lineCap);//笔帽样式
- $.log(context.lineJoin);//两条连续线段的连接样式
- $.log(context.lineWidth);//线段的宽度
- $.log(context.miterLimit);//斜联接
- $.log(context.shadowColor);//阴影的颜色,默认为#000000,
- $.log(context.shadowOffsetX);//阴影在x方向上的偏移量,默认为0,不受坐标转换的影响。
- $.log(context.shadowOffsetY);//阴影在y方向上的偏移量,默认为0,不受坐标转换的影响。
- $.log(context.shadowBlur);//阴影的模糊度,默认为0,负数值将会被忽略
- }
- );
接下来,就是我们利用这个画笔来学习怎么画了
各种线
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.beginPath();
- context.lineCap="butt";//默认
- context.lineWidth=10;
- context.moveTo(10,10);
- context.lineTo(100,10);//简单的一条线
- context.stroke();//该方法真正在画布上绘制该线段
- context.beginPath();
- context.lineCap="round";//圆形线头
- context.moveTo(10,30);
- context.lineTo(100,30);
- context.stroke();//该方法真正在画布上绘制该线段
- context.beginPath();
- context.lineCap="square";//方形线头
- context.moveTo(10,50);
- context.lineTo(100,50);
- context.stroke();//该方法真正在画布上绘制该线段
- }
- );
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.lineWidth=10;
- context.shadowColor="#0000FF";
- context.beginPath();
- context.lineCap="round";
- context.moveTo(10,10);
- context.lineTo(100,10);
- context.shadowOffsetX=10;
- context.shadowBlur=10;
- context.stroke();
- context.beginPath();
- context.lineCap="round";
- context.moveTo(10,30);
- context.lineTo(100,30);
- context.shadowOffsetY=10;
- context.shadowBlur=10;
- context.stroke();
- }
- );
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.lineWidth=10;
- context.shadowColor="#0000FF";
- context.beginPath();
- context.lineJoin="miter";//两条线段的外边缘一直扩展到它们相交
- context.moveTo(10,70);
- context.lineTo(50,10);
- context.lineTo(80,70);
- context.stroke();
- context.lineJoin="bevel";//以一个斜边进行连接
- context.moveTo(100,70);
- context.lineTo(140,10);
- context.lineTo(180,70);
- context.stroke();
- context.lineJoin="round";//:以一个圆弧边进行连接
- context.beginPath();
- context.moveTo(200,70);
- context.lineTo(240,10);
- context.lineTo(280,70);
- context.stroke();
- context.closePath();//关闭path
- }
- );
mitre的限定
各种变换
缩放
transform,transform的参数比较多,也比较难理解,简单的说transform是最自由的变形方式,下面给出些参考
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.lineWidth=10;
- context.shadowColor="#0000FF";
- context.beginPath();
- context.miterLimit=1;//miterLimit属性为斜面的长度设置一个上限。
- //只对线条使用设置为"miter"的lineJoin属性绘制并且两条线段以锐角相交的时候有效
- context.lineJoin="miter";//两条线段的外边缘一直扩展到它们相交
- context.moveTo(10,70);
- context.lineTo(50,10);
- context.lineTo(80,70);
- context.stroke();
- }
- );
各种几何图形
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;//改变默认高度
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.fillStyle="#AABBCC";
- context.lineWidth=2;
- context.shadowColor="#0000FF";
- //矩形
- context.beginPath();
- context.fillRect(10,10,50,50);//实体矩形:x,y,width,height
- context.strokeRect(70,10,50,50)//空心矩形:x,y,width,height
- //context.move(10,100);
- //圆弧:x,y,radius,startAngle,endAngle,anticlockwise
- context.beginPath();
- context.arc(35,110,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.stroke();
- //context.closePath();
- context.beginPath();
- context.arc(85,110,25,(Math.PI/180)*0,(Math.PI/180)*180,false);
- context.stroke();
- //context.closePath();
- context.beginPath();
- context.arc(135,110,25,(Math.PI/180)*0,(Math.PI/180)*180,true);
- context.stroke();
- //context.closePath();
- context.beginPath();
- context.arc(185,110,25,(Math.PI/180)*180,(Math.PI/180)*360,true);
- context.stroke();
- //context.closePath();
- context.beginPath();
- context.arc(235,110,25,(Math.PI/180)*90,(Math.PI/180)*0,false);
- context.fillStyle="blue";
- context.fill();
- //context.stroke();
- //context.closePath();
- context.beginPath();
- context.arc(285,110,25,(Math.PI/180)*180,(Math.PI/180)*45,false);
- context.closePath();
- context.stroke();
- context.beginPath();
- context.arc(335,110,25,(Math.PI/180)*180,(Math.PI/180)*45,false);
- context.closePath();
- context.fillStyle="blue";
- context.fill();
- context.stroke();
- //曲线
- context.beginPath();
- context.moveTo(10,160);//二次贝塞尔曲线的起始点
- //controlX,controlY,endX,endY
- context.quadraticCurveTo(70,280,235,140);
- context.stroke();
- context.closePath();
- context.beginPath();
- context.moveTo(10,300);//三次贝塞尔曲线的起始点
- //controlX1,controlY1,controlX2,controlY2,endX,endY
- context.bezierCurveTo(70,280,50,400,235,190);
- context.stroke();
- context.closePath();
- }
- );
记得CSS3中的transform不?canvas肯定也有啊
平移
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;//改变默认高度
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.fillStyle="#AABBCC";
- context.lineWidth=2;
- context.shadowColor="#0000FF";
- context.moveTo(10,10);
- //context.beginPath();
- //context.beginPath();
- context.fillRect(10,10,50,50);//实体矩形:x,y,width,height
- //context.stroke();
- $(canvas).on(
- "click",
- {"context":context},
- function(e){
- $.log(e.data.context);
- varctx=e.data.context;
- ctx.translate(10,10);//再最后的路径点上偏移10*10的位置
- context.fillRect(10,10,50,50);
- context.stroke();
- }
- );
- }
- );
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;//改变默认高度
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.fillStyle="#AABBCC";
- context.lineWidth=2;
- context.shadowColor="#0000FF";
- context.moveTo(10,10);
- //context.beginPath();
- //context.beginPath();
- context.fillRect(10,10,50,50);//实体矩形:x,y,width,height
- //context.stroke();
- $(canvas).on(
- "click",
- {"context":context},
- function(e){
- $.log(e.data.context);
- varctx=e.data.context;
- ctx.scale(1.1,1.1);//在最后的大小基础上缩放倍数必须是正数
- context.fillRect(10,10,50,50);
- context.stroke();
- }
- );
- }
- );
旋转
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;//改变默认高度
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.strokeStyle="rgb(255,0,0)";
- context.fillStyle="#AABBCC";
- context.lineWidth=2;
- context.shadowColor="#0000FF";
- context.moveTo(10,10);
- //context.beginPath();
- //context.beginPath();
- context.fillRect(10,10,50,50);//实体矩形:x,y,width,height
- //context.stroke();
- $(canvas).on(
- "click",
- {"context":context},
- function(e){
- $.log(e.data.context);
- varctx=e.data.context;
- ctx.rotate((Math.PI/180)*10);//旋转的角度,旋转的中心是canvas坐标原点
- context.fillRect(10,10,50,50);
- context.stroke();
- }
- );
- }
- );
- //以下两段代码结果一致
- context.transform(1,0,0,1,10,10)
- context.translate(10,10);
- //以下两段代码结果一致
- context.transform(10,0,0,10,0,0);
- context.scale(10,10);
- //以下三段代码结果一致
- context.transform(Math.cos((Math.PI/180)*10),Math.sin((Math.PI/180)*10),-Math.sin((Math.PI/180)*10),Math.cos((Math.PI/180))*10,0,0);
- context.transform(-Math.sin((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.sin((Math.PI/180)*10),0,0);
- context.rotate(10);
组合
字体(看文档说canvas的字体支持CSS样式的描写,但是,我不知道怎么样让canvas的font支持CSS3的在线字体)
我们尝试写一圈旋转的文字,吧上面的知识点合起来看看效果
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=100;
- canvas.width=100;
- varcontext=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- //默认新图形会覆盖在原有内容之上
- context.globalCompositeOperation="source-over";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- $(canvas).toggle(
- function(){
- canvas.width=100;
- //原有内容之下绘制新图形
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="destination-over";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的
- context.clearRect(0,0,500,500);
- context.beginPath();
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="source-in";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的destination-in
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="destination-in";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //只有新图形中与原有内容不重叠的部分会被绘制出来source-out
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="source-out";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //原有内容中与新图形不重叠的部分会被保留
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="destination-out";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="source-atop";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="destination-atop";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //两图形中重叠部分作加色处理
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="lighter";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //两图形中重叠的部分作减色处理darker
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="darker";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //重叠的部分会变成透明
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="xor";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- },
- function(){
- canvas.width=100;
- //只有新图形会被保留,其它都被清除掉
- context.clearRect(0,0,500,500);
- context.beginPath();
- context=canvas.getContext("2d");
- context.fillStyle="#AABBCC";
- context.fillRect(10,10,50,50);
- context.globalCompositeOperation="copy";
- context.fillStyle="blue";
- context.arc(70,30,25,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.fill();
- $("span").html(context.globalCompositeOperation);
- alert("演示结束");
- }
- );
- }
- );
- <scriptsrc=../../"js/jquery-1.7.1.min.js"type="text/javascript"></script>
- <linkrel="stylesheet"type="text/css"href=../../"http://fonts.googleapis.com/css?family=Tangerine">
- <scripttype="text/javascript">
- $.log=function(msg){
- console.log(msg);
- }
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=200;
- canvas.width=200;
- varcontext=canvas.getContext("2d");
- context.font="20px新宋体";
- context.fillText("这是实心新宋体",10,30);
- context.strokeText("这是空心新宋体",10,60);
- context.font="20pxTangerineserif";
- context.fillText("HelloHTML5",10,100);
- context.strokeText("HelloHTML5",10,150);
- }
- );
- </script>
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.translate(150,150);
- context.scale(0.7,0.7);
- context.font="12pxTahoma";
- for(vari=0;i<12;i++){
- context.fillText((i+3)%12==0?12:(i+3)%12,150,10);
- context.rotate((Math.PI/6));
- }
- }
- );
在具体绘制的时候,定位总是让我这样没有空间感的人感觉痛苦,所以我现在canvas上画上很多格子,帮助我进行布局
- $(
- function(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.lineWidth=1;
- context.strokeStyle="rgb(211,211,211)";
- for(vari=0;i<50;i++){
- $.log(i);
- context.moveTo(i*10,0);
- context.lineTo(i*10,500);
- context.stroke();
- }
- for(vari=0;i<50;i++){
- $.log(i);
- context.moveTo(0,i*10);
- context.lineTo(500,i*10);
- context.stroke();
- }
- }
- );
- $(
- function(){
- clock();
- setInterval(clock,1000);
- }
- );
- functionclock(){
- varcanvas=document.getElementById("mycanvas");
- canvas.height=500;
- canvas.width=500;
- varcontext=canvas.getContext("2d");
- context.beginPath();
- context.lineWidth=1;
- context.strokeStyle="rgb(211,211,211)";
- for(vari=0;i<50;i++){
- $.log(i);
- context.moveTo(i*10,0);
- context.lineTo(i*10,500);
- context.stroke();
- }
- for(vari=0;i<50;i++){
- $.log(i);
- context.moveTo(0,i*10);
- context.lineTo(500,i*10);
- context.stroke();
- }
- context.beginPath();
- context.strokeStyle="rgb(255,0,0)";
- context.arc(250,250,200,(Math.PI/180)*0,(Math.PI/180)*360,false);
- context.stroke();
- context.save();//存储当前画布坐标系状态
- context.beginPath();
- context.font="14pxTahoma"
- context.translate(255,255);//将坐标系坐标原点移至图中间
- context.strokeStyle="#FFFFFF";
- for(vari=0;i<12;i++){
- context.fillText((i+3)%12==0?12:(i+3)%12,180,0);
- context.rotate((Math.PI/6));
- }
- context.restore();
- context.save();
- context.beginPath();
- context.lineWidth=5;
- context.translate(255,255);//将坐标系坐标原点移至图中间
- for(i=0;i<60;i++){
- if(i%5!=0){
- context.beginPath();
- context.moveTo(180,0);
- context.lineTo(190,0);
- context.stroke();
- }
- context.rotate(Math.PI/30);
- }
- context.restore();
- varnow=newDate();
- varsec=now.getSeconds();
- varmin=now.getMinutes();
- varhr=now.getHours()>=12?now.getHours()-12:now.getHours();
- context.save();
- context.translate(255,255);//将坐标系坐标原点移至图中间
- //-(Math.PI/6)*3是因为0度在3点这里
- context.rotate(hr*(Math.PI/6)+(Math.PI/360)*min+(Math.PI/21600)*sec-(Math.PI/6)*3);
- context.lineWidth=14;
- context.beginPath();
- context.moveTo(-20,0);
- context.lineTo(150,0);
- context.stroke();
- context.restore();
- context.save();
- context.translate(255,255);//将坐标系坐标原点移至图中间
- context.rotate(min*(Math.PI/30)+(Math.PI/1800)*sec-(Math.PI/6)*3)
- context.lineWidth=10;
- context.beginPath();
- context.moveTo(-28,0);
- context.lineTo(160,0);
- context.stroke();
- context.restore();
- context.save();
- context.translate(255,255);//将坐标系坐标原点移至图中间
- context.lineWidth=1;
- context.rotate(sec*(Math.PI/30)+(Math.PI/1800)*sec-(Math.PI/6)*3)
- context.lineWidth=10;
- context.beginPath();
- context.moveTo(-28,0);
- context.lineTo(160,0);
- context.stroke();
- context.restore();
- }
相关推荐
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
使用html5中的canvas标签+jquery绘制的时钟走动代码
html5 canvas画布绘制圆形时钟代码
javascript HTML5 canvas 时钟
html5 canvas制作15种数字时钟样式代码 html5 canvas制作15种数字时钟样式代码
HTML5 canvas超逼真的模拟时钟特效 canvas
html5---用canvas写一个时钟
使用html5中的canvas,结合javascript实现时钟效果
NULL 博文链接:https://mooring.iteye.com/blog/1594032
HTML5 Canvas创意时钟特效是一款基于HTML5和Canvas绘制的圆形个性化时钟动画特效。
使用canvas绘制的实时时钟
之前我们有给大家介绍过很多基于...这次要分享的是15个超绚丽的HTML5 Canvas时钟动画特效,它们很多都有各自不同的外观,有几个时钟的造型还非常新颖奇特,因为是基于HTML5 Canvas的,所以你的浏览器需要支持HTML5。
用HTML5的Canvas制作的时钟显示效果,绘制了表盘,时针,分针,秒针以及数字时间的显示,对该文件有问题可以私聊
HTML5 canvas背景图片圆形时钟,时钟背景图片可更换。
这次我们要继续为大家分享一款基于HTML5 Canvas的圆盘时钟动画,和之前分享的这款HTML5 Canvas 圆形时钟动画类似,它也是基于HTML5的,但是这款时钟提供了3种不同的样式风格,而且时钟的大小可以自己控制。
html5 canvas显示日期星期的时钟代码 html5 canvas显示日期星期的时钟代码
HTML5 Canvas粒子数字时钟特效是一款可自定义颜色背景的云粒子数字时钟动画特效。
实现时钟的分针、时针和秒针的旋转移动