标签：
<!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>无标题文档</title> </head> <body> <canvas id="drawing" style="background-color:#FFC" width="1530" height="800"> canvas有自己的宽高，背景色。canvas就是一张画布 </canvas> <script> var canvas = document.getElementById("drawing"); //取得2d上下文，绘制2d图形 var ctx = canvas.getContext("2d"); //lineWidth指定线条的宽度 ctx.lineWidth = 2; //lineJoin指定两线相交处的方式，圆交round,斜交bevel，斜接miter ctx.lineJoin = "square"; //lineCap控制线条末端的形状，平头butt,圆头round,方头squar ctx.lineCap = "butt"; //beginPath()预示开始一条路径，用moveTo(),lineTo(),arcTo(),arc()等方法设置路径 ctx.beginPath(); //绘制外圆 //startAngel和endAngel都为弧度，false表示弧度的值是按顺时针算还是逆时针算，但是在绘制线条时是按逆时针绘制的 ctx.arc(100,100,99,0,2*Math.PI,false);//默认起始绘制点在圆的最右点 //绘制内圆 ctx.moveTo(194,100);//将画笔移到(100,100)的位置，不画线，否则会绘制多余的直线 ctx.arc(100,100,94,0,2*Math.PI,false); //绘制分针 ctx.moveTo(100,100); ctx.lineTo(100,15); //绘制时针 ctx.moveTo(100,100); ctx.lineTo(35,100); //描边 ctx.stroke(); //alert("Point(100,100) is in the path?"+ctx.isPointInPath(100,100)); ctx.font = "bold 14px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "buttom"; ctx.fillText("12",100,20); ctx.textAlign = "start"; ctx.fillText("12",100,40); ctx.textAlign = "end"; ctx.fillText("12",100,60); var fontSize = 100; ctx.font = fontSize+"px Arial"; //measureText方法确定按照font设置的文本绘制后所占据的宽度，以像素来计 while(ctx.measureText("Hello world!").width > 140) { fontSize--; ctx.font = fontSize+"px Arial"; } ctx.fillText("Hello world!",600,100); ctx.fillText("Font size is "+fontSize+"px",600,50); ctx.fillText("Hello world!",600,200,40);//文本的最大像素宽度为40px，绘制的文本会被压缩在40px以内 </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/pmx-pmx/p/5124308.html
