<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas>A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //开始路径 context.beginPath(); /*绘制弧线，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法 以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。 */ context.arc(130,130,90,0,2*Math.PI,false); /*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给 定的半径radius穿过(x1,y1) */ context.arcTo(310,220,400,130,80) /*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。 */ context.bezierCurveTo(320,210,400,250,310,300); /*lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止*/ context.lineTo(0,300); context.moveTo(130,220); context.lineTo(100,300); /*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且 以(cx,cy)作为控制点 */ context.quadraticCurveTo(40,380,130,400); context.lineTo(450,400); /*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/ context.rect(80,80,100,100) context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } </script> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas>A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 context.moveTo(194,100);//将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); //绘制分针 context.moveTo(100,100); context.lineTo(100,15); //绘制时针 context.moveTo(100,100); context.lineTo(35,100); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } </script> </body> </html>
（4）、绘制文本
绘制文本主要有两个方法：fillText()和strokeText()。这两个方法接收4个参数：要绘制的文本字符串、x坐标，y坐标和可选的最大像素宽度。这两个方法有三个属性：font、textAlign和textBaseline。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas>A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //开始路径 context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //绘制内圆 context.moveTo(194,100);//将绘图游标移动到（x,y），不画线 context.arc(100,100,94,0,2*Math.PI,false); //绘制分针 context.moveTo(100,100); context.lineTo(100,20); //绘制时针 context.moveTo(100,100); context.lineTo(35,100); //添加文字“12” context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle";//文本的基线 context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法，这样才能把图像绘制到画布上。 context.stroke(); } </script> </body> </html>
（5）、变换