<!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)、变换
<!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(); //缩放图像 /*scale(scaleX,scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleY。 scaleX和scaleY的默认值都是1.0 */ context.scale(0.8,0.8); //绘制外圆 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); //变换原点 /*translate(x,y):将坐标原点移动到(x,y)。执行这个变换后,坐标(0,0)会变成之 前由(x,y)表示的点 */ context.translate(100,100); //添加文字“12” context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle";//文本的基线 context.fillText("12",0,-85); //旋转表针 /*rotate(angle):围绕原点旋转图像angle弧度*/ context.rotate(1); //绘制分针 context.moveTo(0,0); context.lineTo(0,-80); //绘制时针 context.moveTo(0,0); context.lineTo(-65,0); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必须调用stroke()方法,这样才能把图像绘制到画布上。 context.stroke(); } </script> </body> </html>
(6)、绘制图像