2

我用一些硬编码的像素在 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）。

4

1 回答 1

5

您应该使用转换矩阵。这是一个教程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-30T11:42:14.500 回答