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

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.font = "italic 200 36px/2 Unknown Font, sans-serif"; ctx.strokeStyle = "blue"; var i; for (i=0;i<450; i+=45){ ctx.strokeText("Hello World",i,i); } } } </script> </head> <body id="MyCanvas" width="600" height="500" border="1"> </canvas> </body> </html>

23.clip 将当前的路径作为后面绘制操作的区域

　　比如调用函数fillRect 画矩形或者 arc 画了圆之后，则后面立即跟个clip函数，表示后面再有的操作都是在这个矩形或者圆内。

<html> <head> <title>A canvas clip 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.fillRect(0,0,150,150); ctx.translate(75,75); // Create a circular clipping path ctx.beginPath(); ctx.arc(0,0,60,0,Math.PI*2,true);//这里可以改为fillRect测试下，注意上面的translate就不需要了。 ctx.clip(); // draw background var lingrad = ctx.createLinearGradient(0,-75,0,75); lingrad.addColorStop(0, '#232256'); lingrad.addColorStop(1, '#143778'); ctx.fillStyle = lingrad; ctx.fillRect(-75,-75,150,150); // draw stars for (j=1;j<50;j++){ ctx.save(); ctx.fillStyle = '#fff'; ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150)); drawStar(ctx,Math.floor(Math.random()*4)+2); ctx.restore(); } } function drawStar(ctx,r){ ctx.save(); ctx.beginPath() ctx.moveTo(r,0); for (i=0;i<9;i++){ ctx.rotate(Math.PI/5); if(i%2 == 0) { ctx.lineTo((r/0.525731)*0.200811,0); } else { ctx.lineTo(r,0); } } ctx.closePath(); 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>clip</code> example</h1> <div> <canvas id="canvas" width="150" height="150"></canvas> <pre> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,150,150); ctx.translate(75,75); // Create a circular clipping path ctx.beginPath(); ctx.arc(0,0,60,0,Math.PI*2,true); ctx.clip(); // draw background var lingrad = ctx.createLinearGradient(0,-75,0,75); lingrad.addColorStop(0, '#232256'); lingrad.addColorStop(1, '#143778'); ctx.fillStyle = lingrad; ctx.fillRect(-75,-75,150,150); // draw stars for (j=1;j<50;j++){ ctx.save(); ctx.fillStyle = '#fff'; ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150)); drawStar(ctx,Math.floor(Math.random()*4)+2); ctx.restore(); } } function drawStar(ctx,r){ ctx.save(); ctx.beginPath() ctx.moveTo(r,0); for (i=0;i<9;i++){ ctx.rotate(Math.PI/5); if(i%2 == 0) { ctx.lineTo((r/0.525731)*0.200811,0); } else { ctx.lineTo(r,0); } } ctx.closePath(); ctx.fill(); ctx.restore(); } </pre> </div> </body> </html>

24.createRadialGradient 方法创建一条放射颜色渐变效果，语法如下：

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

参数描述

xStart, yStart 开始圆的圆心的坐标。

radiusStart 开始圆的直径。

xEnd, yEnd 结束圆的圆心的坐标。

radiusEnd 结束圆的直径。

例子如下：