canvas 캔버스 가 fillRect()를 사용 할 때 두 배의 효과 가 나타 나 는 문 제 를 해결 합 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.getElementById('canvas').getContext('2d');
canvas.fillRect(50,50,50,50);
}
</script>
<style>
body{
background: #000;
}
#canvas{
width: 300px;
height: 400px;
background:#fff;
}
</style>
</head>
<body>
<canvas id="canvas">
<span> canvas </span>
</canvas>
</body>
</html> 
이 효 과 는 우리 가 예상 한 것 과 달리 두 가지 수정 방안 이 있다.
(1)코드 js 에 폭 높 은 속성 을 설정 한 코드 설정 너비 와 높이 를 추가 합 니 다.
canvas.setAttribute("height",canvas.clientHeight);
canvas.setAttribute("width",canvas.clientWidth);
<canvas id="canvas" width="300" height="400" >
<span> canvas </span>
</canvas>
canvas 캔버스 가 fillRect()를 사용 할 때 고도 로 두 배의 효과 가 나타 나 는 문 제 를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Jetpack Compose를 사용한 커스텀 컴포저블첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
