1

не мгоу разобраться почему, вроде всё должно работать, функция doCanvas вызывается, и работает отдельно. а при уменьшении масштаба она не стирает старый рисунок

var img;
var tttScale = 1;
var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  img = new Image();
  var f = document.getElementById("uploadimage").files[0],
    url = window.zURL || window.URL,
    src = url.createObjectURL(f);
  img.src = src;
  img.onload = function() {
    ctx.drawImage(img, 0, 0, img.width, img.height);
  };
};
document.getElementById("uploadimage").addEventListener("change", draw, false)

function Move(a) {
  switch (a) {
    case 'plus':
      if (tttScale < 1) {
        tttScale = 1;
      }
      tttScale = tttScale + 0.05;
      break;
    case 'mines':
      if (tttScale > 1) {
        tttScale = 1;
      }
      tttScale = tttScale - 0.05;
      break;
    default:
      tttScale = 1;
  }

  var ctx = document.getElementById('canvas').getContext('2d');
  doCanvas();
  ctx.scale(tttScale, tttScale);
  ctx.drawImage(img, 0, 0, img.width, img.height);
  // alert(tttScale);

}

function doCanvas() {
  ctx.fillStyle = '#FF8F00';
  ctx.fillRect(0, 0, 500, 500);
  ctx.fillStyle = '#fff';
  //alert("111");
};
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body onload="doCanvas()">
  <input type="file" name="img" id="uploadimage">
  <a href="javascript:void(0)" onclick="Move('mines')" target="_self" id="a_33ff_4">Minus</a>

  <a href="javascript:void(0)" onclick="Move('plus')">Plus</a>

  </br>
  <canvas id="canvas" width="500" height="500" ;></canvas>
  <script src="config.js"></script>
</body>

</html>

1 ответ 1

1

Готовое решение = > https://jsfiddle.net/c7ffxtjj/

Выдает следующую ошибку - Uncaught TypeError: Cannot read property 'width' of undefined

  • переменная img.width не инициализирована (добавь её в draw())

Ну и еще.

  • Для прорисовки картинок используй следующую функцию:

function draw(options) { var img = new Image(); img.src = options.file || options.filename; ctx.drawImage(img, options.x, options.y, options.width, options.height); }

Где аргумент options - объект с параметрами x, y, width, height, file (или filename).

  • для очищения canvas используй`ctx.clearRect();

В идеале подойдет следующее:

 var width = document.getElementsByTagName('canvas')[0].width,
     height = document.getElementsByTagName('canvas')[0].height;

 function clear(Options)
 {
    ctx.clearRect(Options.x, Options.y, Options.width, Options.height);
 }

Где Options - объект с обязательными параметрами x, y, width, height

Что бы закрасить canvas, если не нужно рисовать картинку можно использовать

function Rect(parameters) {
   ctx.fillStyle = parameters.color || 'black';
   ctx.fillRect(parameters.x, parameters.y, parameters.width, parameters.height);
}

где parameters - объект с обязательными значениями x, y, width, height и необязательным color (если его нет нарисуется красный квадрат)

  • Для инициализации игрового цикла (постоянной прорисовки) используй эту заготовку => window.onload = Start;

    var loop = function() { now = performance.now(); dt = dt + Math.min(1, (now-last)/1000);

    while(dt > step) { dt = dt - step }

    last = now;

    Update(dt);

    requestAnimationFrame(loop); //repeat it again }, last = performance.now(), step = 1/60, dt = 0, now;`

    requestAnimationFrame(loop);

где используются function Start и function Update

9
  • а кто выдает ошибку? хром молчит.. добавил var img.width; - теперь вообще канвас исчез
    – NormalArs
    1 дек 2016 в 20:20
  • Тут код нужно на хостинг закидывать, через jsfiddle не показано имя файла скрипта, если не хочешь переделывать под мои стандарты, просто после img = new Image(); допиши` img.width = твое_значение`
    – TitaN
    1 дек 2016 в 20:23
  • Закинь скрипты на jsfiddle, я посмотрю
    – TitaN
    1 дек 2016 в 20:25
  • Переделывай короче скрипт
    – TitaN
    1 дек 2016 в 20:26
  • Сейчас скину линк на рабочий вариант если смогу сделать
    – TitaN
    1 дек 2016 в 20:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.