調整在cnvas上繪製形狀的html5畫布的大小

我在具有某些硬編碼像素的html5畫布上繪製了形狀。現在我想調整在調整畫布寬度drwan形狀和height.here是我的代碼：調整在cnvas上繪製形狀的html5畫布的大小

     var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 

         context.moveTo(232, 158); 
         context.lineTo(314, 145); 
         context.lineTo(382, 134); 
         context.lineTo(491, 144); 
         context.lineTo(576, 154); 
         context.lineTo(512,170); 
         context.quadraticCurveTo(404, 152, 352, 160); 
         context.lineTo(304,168); 
         //context.stroke(); 
         context.closePath(); 
         context.fillStyle = xx_Lpattern; 
         context.fill(); 

         context.beginPath(); 

         context.moveTo(576, 154); 
         context.lineTo(670, 163); 
         context.lineTo(751, 174); 
         context.lineTo(748,236); 
         context.lineTo(606, 216); 
         context.quadraticCurveTo(705, 188, 576, 179); 
         context.lineTo(512,170) 
         //context.stroke(); 
         context.closePath(); 
         context.fillStyle = xx_Lpattern; 
         context.fill();

調整畫布大小形狀大小也應該得到改變（這裏後，我希望儘量減少畫布大小尺寸爲500x300 ）。

來源

2012-05-29 Sandeep Kumar

您可能需要從[HTML5畫布矢量圖形（http://stackoverflow.com/questions/4340040的建議之一/ html5-canvas-vector-graphics），或者在調整畫布大小後自己重繪形狀。 – Jeroen

您應該使用變換矩陣。這裏是教程https://developer.mozilla.org/en/Canvas_tutorial/Transformations

scale(x, y)

這是你需要的功能。這裏的jsfiddle與你的代碼示例

http://jsfiddle.net/peRxy/1/

代碼：

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var resizeFactor = 2; 

drawMyWeirdShape(); 
canvas.width *= resizeFactor; 
canvas.height *= resizeFactor; 
context.scale(resizeFactor ,resizeFactor); 
drawMyWeirdShape(); 


function drawMyWeirdShape() { 
    // this is your code for drawing your weird shape 
    context.moveTo(232, 158); 
    context.lineTo(314, 145); 
    context.lineTo(382, 134); 
    context.lineTo(491, 144); 
    context.lineTo(576, 154); 
    context.lineTo(512, 170); 
    context.quadraticCurveTo(404, 152, 352, 160); 
    context.lineTo(304, 168); 
    context.stroke(); 
    context.closePath(); 
    context.fill(); 

    context.beginPath(); 

    context.moveTo(576, 154); 
    context.lineTo(670, 163); 
    context.lineTo(751, 174); 
    context.lineTo(748, 236); 
    context.lineTo(606, 216); 
    context.quadraticCurveTo(705, 188, 576, 179); 
    context.lineTo(512, 170) 
    context.stroke(); 
    context.closePath(); 
    context.fill(); 
}

來源

2012-05-30 11:42:14 jazzytomato

調整在cnvas上繪製形狀的html5畫布的大小

回答

相關問題