Как автоматически масштабировать позиции пикселей в холсте HTML5?

Я создал приложение для рисования на основе HTML5, которое использовало элемент холста HTML5. Я написал код для рисования эскизов на холсте.Как автоматически масштабировать позиции пикселей в холсте HTML5?

enter image description here

оригинальный размер холста составляла 500 точек х 500 пикселей. Все чертежи были сделаны в соответствии с этим. Теперь моя проблема в том, что мне нужно изменить размер холста до 1000 x 1000 и вы хотите, чтобы рисунки покрывали весь новый холст. Есть ли какой-либо простой способ сделать это, вместо того, чтобы напрямую манипулировать пиксельными позициями?

источник

2013-04-04 geeky_monster

Вы можете изменить размер холста с помощью CSS и сохранить свойства ширины и высоты элемента canvas. Это создаст необходимую вам растяжку.

источник

2013-04-05 00:14:58 Tom

Спасибо. Я сделал это . Оно работает !! –

Я считаю, что то, что вы хотите сделать, это масштаб и, возможно, перевод позиции вашего холста.

Вот рабочий пример: http://marketimpacts.com/storage/9781118385357%20ls0701%20Resizing%20and%20Scaling%20the%20Canvas.htm

Если это не то, что вам нужно, другие примеры Canvas здесь: http://donkcowan.com/html5-canvas-for-dummies/

Вот код:

<!DOCTYPE HTML> <html> <head> <script> 

// SUMMARY: Draws random circles on a 
// resized and rescaled canvas. 

// A. WINDOW LOAD function.      
window.onload = function() 
{ 
    // A1. CANVAS definition standard variables.    
    canvas = document.getElementById("canvasArea"); 
    context = canvas.getContext("2d"); 

    // A2. PARAMETERS for circles. 
    var numCircles = 300; 
    var maxRadius = 20; 
    var minRadius = 3; 
    var colors  = ["aqua", "black", "blue", "fuchsia", 
        "green", "cyan", "lime", "maroon", 
        "navy", "olive", "purple","red", 
        "silver","teal", "yellow","azure", 
        "gold", "bisque","pink", "orange"]; 
    var numColors = colors.length; 

    // A3. RESIZE & RESCALE canvas. 
    canvas.width = 400; canvas.height = 100; 
    context.scale(.7, .3); 

    // A4. CREATE circles. 
    for(var n=0; n<numCircles; n++) 
    { 
     // A5. RANDOM values for circle characteristics. 
     var xPos  = Math.random()*canvas.width; 
     var yPos  = Math.random()*canvas.height; 
     var radius  = minRadius+(Math.random()*(maxRadius-minRadius)); 
     var colorIndex = Math.random()*(numColors-1); 
     colorIndex  = Math.round(colorIndex); 
     var color  = colors[colorIndex]; 

     // A6. DRAW circle. 
     drawCircle(context, xPos, yPos, radius, color); 
    } 
}; 
// B. CIRCLE drawing function. 
function drawCircle(context, xPos, yPos, radius, color) 
{ 
    //B1. PARAMETERS for shadow and angles. 
    var startAngle  = (Math.PI/180)*0; 
    var endAngle   = (Math.PI/180)*360; 
    context.shadowColor = "gray"; 
    context.shadowOffsetX = 1; 
    context.shadowOffsetY = 1; 
    context.shadowBlur = 5; 

    //B2. DRAW CIRCLE 
    context.beginPath(); 
    context.arc(xPos, yPos, radius, startAngle, endAngle, false); 
    context.fillStyle = color; 
    context.fill();    

} 
</script> </head> <body> 
<!-- C. CANVAS definition --> 
<div style = "width:200px; height:200px; 
       margin:0 auto; padding:5px;"> 
<canvas id = "canvasArea" 
     width = "200" height = "200" 
     style = "border:2px solid black"> 
Your browser doesn't currently support HTML5 Canvas. 
</canvas> </div> 
</body> </html>

источник

2013-04-05 20:08:55

спасибо Дон Коуэн !! –

Думаю, мне нужно было подробно остановиться на этом вопросе. Я создал приложение HTML5, в котором хранится массив пиксельных координат, который при перерисовании создает изображение. Поэтому у меня есть тысячи таких массивов, каждый из которых соответствует изображению. Теперь пространство, доступное для изображения, удвоилось. Поэтому мне нужно было масштабировать изображения через пиксели. То, что @Tom предложило выше, отлично работает! –

Рад, что вы в движении! –

Как автоматически масштабировать позиции пикселей в холсте HTML5?

ответ

Смежные вопросы