화면에서 html 캔바스의 크기를 조정하는 방법은 무엇입니까?

-2

나는 HTML5 사용하여 캔버스 예술 프로젝트에서 일하고 있어요 :화면에서 html 캔바스의 크기를 조정하는 방법은 무엇입니까?

내가 캔버스 2200px/49 픽셀 (너비/높이)에 그릴 필요하지만 난 작은 창에서 내 웹 사이트에 표시하려면해야합니다 (600PX/400 픽셀)하지만 클라이언트에서 수정 후 원래 너비와 높이 (2200 px/1600) 이미지로이 캔버스를 변환해야합니다.

<canvas id="iBack" style="width:<?= $backgroundWidth ?>px; height:<?= $backgroundHeigth ?>px; z-index: 0; border: 1px dotted red; "></canvas>

출처

2014-01-07 user3169171

그래서 문제가 무엇인가 : 다음 코드와 데모

입니까? –

시도한 코드 중 일부를 공유하십시오. 여기에 몇 가지 도전 과제가 있습니다. 1) 규모가 매우 거친 이미지이므로 이미지를 멋지게 보이도록 단계별로 축소해야합니다 (벡터 만 사용하는 경우 중요하지 않음). 2) 입력 좌표도 마찬가지로 비율을 조정해야합니다 (다른 방법). 스케일링 된 상태에서 1 : 1이된다는 것은 결과 포인트가 스케일 요소로 양자화된다는 것을 의미합니다. 예를 들어 선을 그릴 경우 실제로는 잘 보이지 않을 수 있습니다. 실제로 벡터의 경우 스케일을 조정할 때 캔버스 스케일링을 전혀 수행하지 않습니다 확장/축소가 필요할 때의 포인트입니다 (확대/축소/최종). – K3N

왜곡되지 않도록 비례 배분하면 CSS를 사용할 수 있습니다.

var scale=2200/600; 
canvas.style.width*=scale; 
canvas.style.height*=scale;

이렇게하면 크기 조정 후 이미지 + 텍스트가 너무 pixelated하게 될 수 있습니다.

취향에 맞게 픽셀 화 한 경우 크기가 조정 된 원본 이미지를 다시 그릴 수 있습니다. http://jsfiddle.net/m1erickson/dZ4D6/이

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var scale=1.0; 
    var fontsize=36; 
    var fontface="verdana"; 
    var fullImageWidth,fullImageHeight; 

    var img=new Image(); 
    img.onload=function(){ 
     redraw(img,"Hello",20,35,1.25); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 

    function redraw(img,text,textX,textY,scale){ 

     canvas.width=img.width*scale; 
     canvas.height=img.height*scale; 

     // draw the scaled image 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width*scale,img.height*scale); 

     ctx.font=(fontsize*scale)+"px "+fontface; 

     // draw the scaled text 
     ctx.fillText(text,textX*scale,textY*scale); 

    } 

    $("#redraw").click(function(){ 
     if(scale==1.00){ 
      scale=0.50; 
     }else{ 
      scale=1.00; 
     } 
     redraw(img,"Hello",20,35,scale); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="redraw">Redraw</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

출처

2014-01-07 17:38:52 markE

화면에서 html 캔바스의 크기를 조정하는 방법은 무엇입니까?

답변

관련 문제