IT技术互动交流平台

HTML5 利用Canvas绘制图形

作者:appjq.com  发布日期:2012-12-03 16:09:43

绘制图形

与SVG不同,wordlink_affiliate">canvas只支援一个基本图形-矩形。其他的图形必须以路径组合出来。还好,我们有一系列的路径绘图函数,可以帮我们组合非常复杂的图形。

矩形

首先看看矩形。wordlink_affiliate">canvas 有三个可以绘出矩形的函数︰

下面看canvas示例及代码:


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.fillRect(25,25,100,100);    
    ctx.clearRect(45,45,60,60);    
    ctx.strokeRect(50,50,50,50);    
  }    
}   

绘制路径

要使用路径绘制图形,我们还需要一些步骤。
beginPath() closePath() stroke() fill()
绘制路径的第一个步骤是呼叫 beginPath 方法。就本质而言,路径是以列表形式储存的一系列子路径(直线、弧线等),并以此构成一个图形。每回呼叫 beginPath 方法时,列表便会被清除,我们就可以开始画新图形。
第二个步骤是呼叫一个方法,实际绘制路径。我们很快就会看到。
第三个步骤是呼叫 closePath 方法(这个步骤不是必要的)。这个方法会尝试以直线连接起点和终点以闭合路径。如果图形已闭合或只有一个点,这个函数就什么也不做。
最后一个步骤是呼叫 stroke 或 fill 方法。呼叫其中一个便会在 canvas 上真正绘出图形。stroke 用于绘制图形的框线,fill 则用于绘制填满的图形。www.it165.net

附注︰呼叫 fill 方法时,任何未闭合的图形都将会自动的闭合,也就不需要使用 closePath 方法。
 

直线:lineTo

lineTo(x, y)
下面的范例绘出两个三角形,一个实心一个空心(见右图)。首先呼叫 beginPath 方法开始绘制新的图形路径。然后使用 moveTo 方法将起点移到想要的位置。再画出三角形的两条边。你将注意到填满和只画边线这两个三角形的不同。如前所述,由于将路径填满时路径会自动闭合,而只画边线的不会。我们如果去掉空心三角形的 closePath(),就只会画出两条直线,而非完整的三角形。
 
 

// 實心三角形    
ctx.beginPath();    
ctx.moveTo(25,25);    
ctx.lineTo(105,25);    
ctx.lineTo(25,105);    
ctx.fill();    
   
// 空心三角形    
ctx.beginPath();    
ctx.moveTo(125,125);    
ctx.lineTo(125,45);    
ctx.lineTo(45,125);    
ctx.closePath();    
ctx.stroke();   

弧线

arc(x, y, radius, startAngle, endAngle, anticlockwise)
這個方法使用五個參數︰x 和 y 是圓中的坐標。radius 為半徑。startAngle 和 endAngle 參數以弧度定義弧線的起角和終角。起角和終角以 x 軸為準。anticlockwise 參數是一個布林值,若為 true 就反時針畫弧,反之則為順時針。

附註︰arc 函數中是以弧度來度量角度,而非角度。將角度轉換為弧度,可以使用這個 javascript 表達式︰var radians = (Math.PI/180)*degrees。

貝茲與二次方曲線

quadraticCurveTo(cp1x, cp1y, x, y) // 在 Firefox 1.5 中是有問題的(下面可以看到應對方案)


bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)    
   
绘制对话泡    
// 二次方曲線的範例    
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();    
//绘制心图形    
// 貝茲曲線的範例    
ctx.beginPath();    
ctx.moveTo(75,40);    
ctx.bezierCurveTo(75,37,70,25,50,25);    
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);    
ctx.bezierCurveTo(20,80,40,102,75,120);    
ctx.bezierCurveTo(110,102,130,80,130,62.5);    
ctx.bezierCurveTo(130,62.5,130,25,100,25);    
ctx.bezierCurveTo(85,25,75,37,75,40);    
ctx.fill();   

矩形
rect(x, y, width, height)

 

Tag标签: Canvas   绘制图形  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规