Как скопировать изображение клипа на холст

0

Код ниже работает отлично, но как я могу сделать копию моего "StopLicht" и поместить копию в другое место на холсте?

<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="sprite-sheet" src="logi.bmp" alt="Logi" width="220" height="277">
<p>Canvas:</p>
<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById("sprite-sheet"); 
    function StopLicht() {
//rij x groen stoplicht
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);
ctx.drawImage(img,112,24,8,8,80,16,8,8);
ctx.drawImage(img,120,24,8,8,88,16,8,8);   
ctx.drawImage(img, 96, 8,8,8,80,24,8,8);
ctx.drawImage(img,104, 8,8,8,88,24,8,8);
}
StopLicht();   //geef het stoplicht weer. en is goed !
</script>
</body>
</html>
Теги:
html5-canvas

1 ответ

0

Да, вы можете использовать canvas translate, чтобы переместить стоп-сигнал в любую позицию x, y на холсте:

context.translate(x, y) переместит начало холста (0,0) в x, y.

Это означает, что вы можете использовать существующие команды drawImage, не изменяя каждую из своих позиций x, y.

function StopLicht(x,y) {

    //save the untransformed context state
    ctx.save();

    // move the canvas to the desired xy coordinate
    ctx.translate(x,y);

    //rij x groen stoplicht
    ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
    ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
    ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
    ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);
    ctx.drawImage(img,112,24,8,8,80,16,8,8);
    ctx.drawImage(img,120,24,8,8,88,16,8,8);   
    ctx.drawImage(img, 96, 8,8,8,80,24,8,8);
    ctx.drawImage(img,104, 8,8,8,88,24,8,8);

    // restore the context to its untransformed state
    ctx.restore();

}

[дополнение: пример использования]

В этом цикле будет напечатано 2 строки из 10 индикаторов:

for(var row=0;row<2;row++){
for(var col=0;col<10;col++){
    StopLicht(row*12,col*12);
}}
  • 0
    Привет Марк, спасибо за ответ. Но это не то, что я ожидаю. Полезно знать «Перевести», чтобы переехать. Что мне нужно, так это два "StopLicht" на моем холсте. Оригинал и копия были. Это одна из частей фона. Поэтому мне нужно FG: 10 «StopLicht» на строку и FG 2 строки. Erik
  • 0
    Вы можете вызвать StopLicht несколько раз, чтобы нарисовать несколько источников света. Смотрите дополнение к моему ответу. Удачи с вашим проектом!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню