html5绘制会动的时钟,HTML5的绝活:巧用Canvas制作会动的时钟

[javascript] view plaincopy

$(function() {

var canvas=document.getElementById("mycanvas");

var context=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();

}

);

各种线∠连接

[javascript] view plaincopy

$(function() {

var canvas=document.getElementById("mycanvas");

var context=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的限定

[javascript] view plaincopy

$(function() {

var canvas=document.getElementById("mycanvas");

var context=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();

}

);

各种几何图形

[javascript] view plaincopy

$(function() {

var canvas=document.getElementById("mycanvas");

canvas.height=500;//改变默认高度

canvas.width=500;

var context=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肯定也有啊

平移

[javascript] view plaincopy

$(function() {

var canvas=document.getElementById("mycanvas");

canvas.height=500;//改变默认高度

canvas.width=500;

var context=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);

var ctx=e.data.context;

ctx.translate(10,10);//再最后的路径点上偏移10*10的位置

context.fillRect(10,10,50,50);

context.stroke();

}

);

}

);

缩放

[javascript] view plaincopy

$(function() {

var canvas=document.getElementById("mycanvas");

canvas.height=500;//改变默认高度

canvas.width=500;

var context=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);

var ctx=e.data.context;

ctx.scale(1.1,1.1);//在最后的大小基础上缩放倍数 必须是正数

context.fillRect(10,10,50,50);

context.stroke();

}

);

}

);