调整在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画布的大小

回答

相关问题