canvas getContext对象方法和属性详细介绍(3)_H5之家

<html> <head> <title>A canvas miterLimit example</title> <meta name="DC.creator" content="Kamiel Martinet, "> <meta name="DC.publisher" content="Mozilla Developer Center, "> <script type="application/x-javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Clear canvas ctx.clearRect(0,0,150,150); // Draw guides ctx.strokeStyle = '#09f'; ctx.lineWidth = 2; ctx.strokeRect(-5,50,160,50); // Set line styles ctx.strokeStyle = '#000'; ctx.lineWidth = 10; // check input if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); } else { alert('Value must be a positive number'); } // Draw lines ctx.beginPath(); ctx.moveTo(0,100); for (i=0;i<24;i++){ var dy = i%2==0 ? 25 : -25 ; ctx.lineTo(Math.pow(i,1.5)*2,75+dy); //if(i==10)break; } ctx.stroke(); return false; } function init(){ document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; draw(); } </script> <style type="text/css"> body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;} h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; } canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; } pre { float:left; display:block; background=\'#\'" border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; } td { vertical-align:top; } </style> </head> <body <h1>A canvas <code>miterLimit</code> example</h1> <table> <tr> <td><canvas id="canvas" width="150" height="150"></canvas></td> <td> Change the miterLimit by entering a new value below and clicking the redraw button.<br><br> <form onsubmit="return draw();"> <label>Miter limit</label> <input type="text" size="3" id="miterLimit"/> <input type="submit" value="Redraw"/> </form> </td> </tr> </table> </body> </html>

运行效果图如下：

canvas getContext对象方法和属性详细介绍

像什么？心电图了。。。

12.shadowOffsetY 同上面的shadowOffsetX

13.textBaseline 文字竖直对齐方式。可取属性值：top, hanging, middle,
alphabetic, ideographic, bottom。默认值：alphabetic.例子如下：

context.fillStyle = '#00f'; context.font = 'italic 30px sans-serif'; context.textBaseline = 'top'; context.fillText ('!', 0, 0); context.font = 'bold 30px sans-serif'; context.strokeStyle = '#00f'; context.strokeText('!', 0, 24);

14.strokeStyle 该属性定义对于边框的修饰,它和fillStyle的作用一样，只不过 fillStyle是对内容的填充。例子如上第十三条中的。

canvas getContext对象方法和属性详细介绍

15.fillStyle 参考第十四条

16.canvas 该属性可以绘制于其上的 Canvas 元素

17.rect 该方法为当前路径添加一条矩形子路径。引用方式：

function rect(x, y, width, height)

其中x,y 为矩形的左上角坐标，width 和height分别是矩形的长宽

18.lineTo 该方法能够画直线，调用方式：

lineTo(x, y)

其中参数x,y为直线终点的坐标，起点是当前点。执行完这个函数，当前点为x,y

19.rotate 方法旋转画布的坐标系统。调用方式如下：

rotate(angle)

其中angle为旋转的弧度，正值表示顺时针方向旋转，负值表示逆时针方向旋转。

例子如下：