3
HTML5 캔버스의 경로를 사용하여 트럭의 그림을 만들었습니다. 캔버스 이미지 자체는 900 줄의 코드에 가깝고 윈도우의 너비/높이로 결정된 크기 조정 비율에 따라 이미지를 그리는 함수를 구현했습니다. 최종 결과는 캔버스와 캔버스 내의 모든 요소가 윈도우 내용에 맞게 동적으로 크기가 조정된다는 것입니다.복잡한 캔버스 경로의 동적 크기 조정 HTML5
나는 캔버스를 사용하는 날 2에만 머물렀다. 그래서 나는 무엇인가 놓쳤을지도 모른다. 그러나 내가하고있는 것을 이루기위한 쉬운 방법이 있어야한다. 그래서, 내 질문은 : 복잡한 경로가 관련되어있는 경우 캔버스와 내부 요소의 크기를 조정하는 더 쉬운 방법/방법이 있습니까?
내 코드의 샘플은 다음과 아니라 신체 부하의 크기를 조정, 나는하여 onResize 리스너에 연결되지했습니다 아직 ... 그래서 당신이 여기에 전체 소스를 얻을 수에 모두 맞지 않을 수 :
당신이 볼 수있는http://www.epixseo.com/fullsource.txt
, 나는 다음 곱셈마다 그 크기를 조정 비율 ... 할 수있는 시간이 걸립니다으로 조정하고 선폭 .... semitruckv1 기능에 canvasWidth를 통과하고 크기 조정 비율을 결정합니다. .. (전체 소스 코드를 복사 + 붙여 넣기하고 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 튜토리얼에서는 이전에 스케일을 보았지만 그 튜토리얼을 읽은 후에 스케일은 내가 향해야하는 방향 인 것처럼 보였습니다. 내일은 그걸 촬영하고 그것이 필요한 경우 대답을 얻었습니다. 시간을내어 주셔서 감사합니다 –
내가 찾던 결과를 얻기 위해 척도를 사용할 수있었습니다. 도움을 주셔서 감사합니다. –