3
我已經使用HTML5畫布中的路徑創建了卡車繪圖。畫布圖像本身接近900行代碼，我已經實現了一個函數來根據窗口寬度/高度確定的調整比例來繪製圖像。最終結果是畫布和畫布內的所有元素都會動態調整大小以適應窗口的內容。動態調整複雜的畫布路徑HTML5
請記住，我只是在第二天使用畫布，所以我可能錯過了一些東西，但必須有一個更簡單的方法來完成我正在做的事情。所以，我的問題是：當涉及複雜路徑時，是否有更簡單的方法來實現畫布及其內部元素的大小調整？
我的代碼示例如下，只調整大小的身體負荷，我沒有它連接到聽者的onResize但...我無法適應這一切，所以你可以在這裏得到充分的來源：
http://www.epixseo.com/fullsource.txt
，你可以看到，我通過canvasWidth進入semitruckv1功能，並確定調整大小比....然後乘以每個協調的lineWidth與調整比例......這需要一段時間才能做到。 ..（你應該能夠複製並粘貼完整的源代碼並在IDE中運行本地）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Semi truck</title>
<style type="text/css">
body {
margin:0px;
}
</style>
<script>
function init() {
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var canvas = document.getElementById("canvas");
var canvasWidth = viewportWidth;
var canvasHeight = viewportHeight;
canvas.style.position = "fixed";
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);
var ctx = canvas.getContext("2d");
semitruckv1(ctx, canvasWidth);
}
function semitruckv1(ctx, canvasWidth) {
//347 default width of initial image
var resizeRatio = canvasWidth/347;
// semitruckv1/Path
ctx.save();
ctx.beginPath();
ctx.moveTo(251.3*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(251.3*resizeRatio, 146.9*resizeRatio, 253.9*resizeRatio, 149.5*resizeRatio, 257.0*resizeRatio, 149.5*resizeRatio);
ctx.bezierCurveTo(260.2*resizeRatio, 149.5*resizeRatio, 262.8*resizeRatio, 146.9*resizeRatio, 262.8*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(262.8*resizeRatio, 140.6*resizeRatio, 260.2*resizeRatio, 138.1*resizeRatio, 257.0*resizeRatio, 138.1*resizeRatio);
ctx.bezierCurveTo(253.9*resizeRatio, 138.1*resizeRatio, 251.3*resizeRatio, 140.6*resizeRatio, 251.3*resizeRatio, 143.8*resizeRatio);
ctx.closePath();
ctx.strokeStyle = "rgb(1, 1, 1)";
ctx.lineWidth = 1*resizeRatio;
ctx.stroke();
// semitruckv1/Path
ctx.beginPath();
ctx.moveTo(243.3*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(243.3*resizeRatio, 151.4*resizeRatio, 249.5*resizeRatio, 157.5*resizeRatio, 257.0*resizeRatio, 157.5*resizeRatio);
ctx.bezierCurveTo(264.6*resizeRatio, 157.5*resizeRatio, 270.8*resizeRatio, 151.4*resizeRatio, 270.8*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(270.8*resizeRatio, 136.2*resizeRatio, 264.6*resizeRatio, 130.1*resizeRatio, 257.0*resizeRatio, 130.1*resizeRatio);
ctx.bezierCurveTo(249.5*resizeRatio, 130.1*resizeRatio, 243.3*resizeRatio, 136.2*resizeRatio, 243.3*resizeRatio, 143.8*resizeRatio);
ctx.closePath();
ctx.lineWidth = 1*resizeRatio;
ctx.stroke();
// semitruckv1/Path
ctx.beginPath();
ctx.moveTo(241.3*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(241.3*resizeRatio, 152.5*resizeRatio, 248.3*resizeRatio, 159.6*resizeRatio, 257.0*resizeRatio, 159.6*resizeRatio);
ctx.bezierCurveTo(265.7*resizeRatio, 159.6*resizeRatio, 272.8*resizeRatio, 152.5*resizeRatio, 272.8*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(272.8*resizeRatio, 135.1*resizeRatio, 265.7*resizeRatio, 128.0*resizeRatio, 257.0*resizeRatio, 128.0*resizeRatio);
ctx.bezierCurveTo(248.3*resizeRatio, 128.0*resizeRatio, 241.3*resizeRatio, 135.1*resizeRatio, 241.3*resizeRatio, 143.8*resizeRatio);
ctx.closePath();
ctx.lineWidth = 0.3*resizeRatio;
ctx.stroke();
// semitruckv1/Path
ctx.beginPath();
ctx.moveTo(232.5*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(232.5*resizeRatio, 157.3*resizeRatio, 243.5*resizeRatio, 168.3*resizeRatio, 257.0*resizeRatio, 168.3*resizeRatio);
ctx.bezierCurveTo(270.6*resizeRatio, 168.3*resizeRatio, 281.6*resizeRatio, 157.3*resizeRatio, 281.6*resizeRatio, 143.8*resizeRatio);
ctx.bezierCurveTo(281.6*resizeRatio, 130.2*resizeRatio, 270.6*resizeRatio, 119.3*resizeRatio, 257.0*resizeRatio, 119.3*resizeRatio);
ctx.bezierCurveTo(243.5*resizeRatio, 119.3*resizeRatio, 232.5*resizeRatio, 130.2*resizeRatio, 232.5*resizeRatio, 143.8*resizeRatio);
ctx.closePath();
ctx.lineWidth = 0.5*resizeRatio;
ctx.stroke();
//THERE ARE ABOUT ANOTHER 800 LINES OF PATH DRAWING DOWNLOAD THE FULL SOURCE TO VIEW: www.epixseo.com/fullsource.txt
}
</script>
</head>
<body onLoad="init()">
<canvas id="canvas"></canvas>
</body>
</html>
+1對於本教程，我看過之前的規模，但在閱讀完該教程後，規模似乎是我應該前進的方向，我明天生病了，如果這是我需要你的答案，謝謝你抽出時間 – 2012-02-13 23:49:40
我能夠用scale來達到我期待的結果，感謝您的幫助 – 2012-02-14 15:23:01