Make canvas fill the whole page

2020-05-30 03:32发布

站内问答 / JavaScript
1177 7 5

How can I make canvas be 100% in width and height of the page?

7条回答
beautiful°
2楼-- · 2020-05-30 03:57

on my observations this runs effectively, and gives a blue shade 

var c = document.getElementById('can');
  var ctx = canvas.getContext('2d');
  ctx.rect(0, 0, canvas.width, canvas.height);
  // add linear gradient
  var g = ctx.createLinearGradient(0, 0, c.width, c.height);
  // light blue color
  g.addColorStop(0, '#8ED6FF');   
  // dark blue color
  g.addColorStop(1, '#004CB3');
  context.fillStyle = g;
  context.fill();


<script>
var c = document.getElementById('can');
      var ctx = canvas.getContext('2d');
      ctx.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var g = ctx.createLinearGradient(0, 0, c.width, c.height);
      // light blue color
      g.addColorStop(0, '#8ED6FF');   
      // dark blue color
      g.addColorStop(1, '#004CB3');
      context.fillStyle = g;
      context.fill();
</scrip
html,body
{
	height:98.0%;
	width:99.5%;
}
canvas
{
	display:block;
	width:100%;
	height:100%;
}
<html>
<body>
<canvas id="can"></canvas>
</body>
  </html>

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)