Question

我在缩小此图像时遇到问题。我正试图改变绘图表面，但到目前为止没有任何工作......我已经尝试了所有的东西。是什么导致图像爆炸？我在这个网页上的总体目标是创建类似于暮光区介绍的背景。星星会闪烁，它们会随机坐标。任何建议或帮助表示赞赏。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Adam The Developer</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style>
	   html, body {
	   margin: 0;
	   }
	   .container-fluid {
	      height: 100vh;
	      /*background-image: url("http://deepskycolors.com/pics/astro/2008/07/07-27-2008_Eagle.jpg");*/
		  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a1/ae/37/a1ae37a1732758f497126a03e32b99bd.jpg");
		  background-repeat: no-repeat;
	      background-position: center center;
          background-size: cover;
	   }
	   .container-fluid ul {
			display: inline-block;
			position: relative;
			right: -75%;
			top: 45px;
	   }
	   .container-fluid li {
			display: inline-block;
			color: white;
			font-size: 1.5em;
			padding-right: 5px;
			padding-left: 5px;
	   }
	   .container-fluid h1,h2 {
			text-align: center;
			color: #fff;
			position: relative;
			top: 30%;
	   }
	   .container-fluid h1 {
			font-weight: 900;
			font-size: 70px;
	   }
	   .container-fluid h2 {
			font-weight: bold;
			font-size: 40px;
	   }
	   #myCanvas {
	   position: absolute;
	   width: 100%;
	   height: 100vh;
	   }
	  
	</style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;">
	<img id="git" src="1474972014_github.svg" width="30px" height="30px">
	</canvas>
	<div class="container-fluid">
	    <ul>
			<li>ABOUT</li>
			<li>PORTFOLIO</li>
			<li>CONTACT</li>
		</ul>
		<h1>ADAM THE DEVELOPER</h1>
		<h2>Welcome To My Site!<br>Where Nothing Is Impossible.</h2>
		<!--<img id="git" src="1474972014_github.svg" width="30px" height="30px">-->
	</div>
	<div class="container">
		<h1>ABOUT</h1>
		<p>Hello everyone. My name is Adam Bell and I'm a front-end web developer. Growing up, I've always been fascinated with technology and creating things. Anytime </p>
	</div>
	<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
window.onload = function() {
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var img = document.getElementById("git");
	ctx.drawImage(img, 300, 30);
};
</script>
</body>
</html>

画布图像不会缩放到正确的大小

0 个答案: