HTML 캔버스가 흐릿한 모양을 만듭니다.

HTML을 사용하여 간단한 도형을 만들고 싶습니다. 그러나 모양이 커야합니다. 그리고 캔버스 전체 화면에HTML 캔버스가 흐릿한 모양을 만듭니다.

예 : http://jsfiddle.net/xLgg43s9/1/embedded/result/

코드 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
* { margin: 0; padding: 0;} 

body, html { height:100%; } 

#canvas { 
    position:absolute; 
    width:100%; 
    height:100%; 
} 
</style> 
</head> 

<body> 
<canvas id="canvas"> 
</canvas> 
<script> 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
ctx.fillStyle = "#000"; 
var w=canvas.width; 
var h=canvas.height; 
ctx.fillRect(0,0,w,h); 
ctx.fillStyle="#fff"; 
ctx.beginPath(); 
var a=w/2; 
var b=0; 
ctx.arc(a,b,20,0,Math.PI,false); 
ctx.closePath(); 
ctx.fill(); 
ctx.stroke(); 
ctx.beginPath(); 
ctx.fillStyle="red"; 
ctx.fillRect(0,0,10,100); 
ctx.stroke(); 
ctx.save(); 

ctx.translate(240, 120); 

ctx.rotate(Math.PI/4); // 45 degrees 

ctx.fillStyle = "yellow"; 
ctx.fillRect(-40, -40, 20, 20); 

ctx.restore(); 

</script> 
</body> 
</html>

를 해결하시기 바랍니다.

출처

2014-12-30 kritya

가능한 중복 창에 맞게] (http://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window) – Philipp

실제로 캔버스를 크게 만드는 대신 캔버스 요소를 늘리는 CSS를 통해 캔버스의 크기를 설정하지 마십시오.

를 사용하여 HTML 대신, 속성 :

<canvas id="canvas" width="500" height="500"></canvas>

을 이제 100 % 너비/높이로 캔버스를 설정하고자하기 때문에, 그 미리 설정된 속성이, 당신을 위해 트릭을하지 않을 당신 다시 몇 가지 JS를 사용하도록해야 할 것 '은 : 당신이 윈도우의 크기가 변경됩니다 때 캔버스 크기 조정을 원한다면

var canvas = document.getElementById("canvas"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
var ctx=canvas.getContext("2d"); 
// etc...

, 나는 당신이 this answer. 보면 좋을 것

[크기 조정 HTML5 캔버스의

출처

2014-12-30 13:06:57 Cerbrus

코드를 붙여 넣습니다. http://jsfiddle.net/Lh8uepys/1/ – dwana

__ [그리고 작동하는 것으로 보입니다] (http://jsfiddle.net/Lh8uepys/1/) __. '# canvas' css 클래스를 제거 할 수 있습니다. – Cerbrus

HTML 캔버스가 흐릿한 모양을 만듭니다.

답변

관련 문제