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

<html> <head> <title>A canvas rotate 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'); ctx.translate(100,100); for (i=1;i<6;i++){ ctx.save(); ctx.fillStyle = 'rgb(255,'+Math.abs(306-51*i)+',0)'; for (j=0;j<i*6;j++){ ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } </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; } </style> </head> <body <h1>A canvas <code>rotate</code> example</h1> <div> <canvas id="canvas" width="200" height="200"></canvas> <pre> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.translate(100,100); for (i=1;i<6;i++){ ctx.save(); ctx.fillStyle = 'rgb(255,'+Math.abs(306-51*i)+',0)'; for (j=0;j<i*6;j++){ ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } </pre> </div> </body> </html>

运行效果如下：

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

20.setMiterLimit 设置斜接限制，具体资料没有找到，有知道的朋友可以补充下。

21.quadraticCurveTo 为当前路径添加一条贝塞尔曲线，引用方式如下：

quadraticCurveTo(cpX, cpY, x, y)

其中x,y 为终点坐标，起点坐标为当前点，cpX,cpY为控制点，控制曲线的形状，举例如下:

<html> <head> <title>A canvas quadraticCurveTo example</title> <meta name="DC.creator" content="Kamiel Martinet, "> <meta name="DC.publisher" content="Mozilla Developer Center, "> <script type="text/javascript"> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('tutorial'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </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; } </style> </head> <body <h1>A canvas <code>quadraticCurveTo</code> example</h1> <div> <canvas id="tutorial" width="150" height="150"></canvas> <pre> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('tutorial'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </pre> </div> </body> </html>

运行效果图如下：

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

22.strokeText 通过控制文字的边框后插入的文字。引用方式如下：

CanvasRenderingContext2D.strokeText(text, x, y [, maxWidth])

其中text为文字，x,y为文字开始的位置，maxWidth是这段文字的最大宽度。

例子如下：