使用cnvas上绘制的形状调整html5画布的大小

Question

我在html5画布上绘制了一些带有硬编码像素的形状.现在我想在调整画布宽度和高度时调整drwan形状的大小.我的代码是:

                      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).

Answer 1

你应该使用转换矩阵.这是一个教程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();
}?