Я создал чертеж грузовика, используя пути на холсте HTML5. Изображение самого холста близко к 900 строкам кода, и я реализовал функцию рисования изображения на основе соотношения размеров, определяемого шириной / высотой окна. Конечным результатом является то, что холст и все элементы внутри холста динамически изменяются в соответствии с содержимым окна.
Имейте в виду, что я только на 2-й день использую холст, поэтому я, возможно, что-то упустил, но должен быть более простой способ выполнить то, что я делаю. Итак, мой вопрос: Есть ли более простой способ / метод для изменения размера холста и его внутренних элементов, когда используются сложные пути?
Пример моего кода приведен ниже и изменяет размер только под нагрузку тела. Я еще не подключил его к прослушивателю 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>