写文章

CSS和canvas标签设置画布尺寸区别

快乐打工仔 分类：实例代码

CSS和canvas标签设置画布尺寸区别属于前端实例代码，有关更多实例代码大家可以查看。

很多朋友可能会遇到这样的情况，在css中设置canvas的尺寸和在canvas标签设置的值相同，但是表现的效果却非常不相同。

通常会出现变形的情况，下面就介绍一下为什么会出现此问题。

先看一段代码实例：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css">
#theCanvas{ 
  background-color:#63F; 
} 
</style> 
<script type="text/javascript"> 
var i = 1; 
var x = 1; 
var y = 100; 
function moveSin(){ 
  var oCanvas=document.getElementById("theCanvas"); 
  var content=oCanvas.getContext( "2d" ); 
  content.beginPath(); 
  content.moveTo(x,y); 
  i+=0.1; 
  x=i*10; 
  y=Math.sin(i)*10+100; 
  content.lineTo(x,y); 
  content.stroke(); 
  content.closePath(); 
} 
setInterval(moveSin,10);
window.onload=function(){
  moveSin();
} 
</script> 
</head> 
<body> 
<canvas id="theCanvas" width="400" height="400"></canvas> 
</body> 
</html>

上面的代码可以比较完美的显示正弦曲线效果。修改一下代码，将canvas的尺寸在css中设置：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css">
#theCanvas{ 
  background-color:#63F; 
  width:400px;
  height:400px;
} 
</style> 
<script type="text/javascript"> 
var i = 1; 
var x = 1; 
var y = 100; 
function moveSin(){ 
  var oCanvas=document.getElementById("theCanvas"); 
  var content=oCanvas.getContext( "2d" ); 
  content.beginPath(); 
  content.moveTo(x,y); 
  i+=0.1; 
  x=i*10; 
  y=Math.sin(i)*10+100; 
  content.lineTo(x,y); 
  content.stroke(); 
  content.closePath(); 
} 
setInterval(moveSin,10);
window.onload=function(){
  moveSin();
} 
</script> 
</head> 
<body> 
<canvas id="theCanvas"></canvas> 
</body> 
</html>

代码显示比较模糊，下面再通过一个更为简单的代码来介绍一下两种设置尺寸方式额区别。

首先要明确一点canvas是一个画布，也就是图像图形的绘制场所，它的默认尺寸是300 x 150。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
  var canvas, context;
  canvas=document.getElementById("thecanvas");
 
  canvas.width=200;
  canvas.height=100;
  canvas.style.border="1px solid red";
 
  context = canvas.getContext("2d");
  context.strokeStyle="#99cc33";
  context.fillRect(90,40,20,20);
}
</script>
</head>
<body>
<canvas id="thecanvas"></canvas>
</body>
</html>

前端教程

再来看使用css设置尺寸的效果，代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
canvas{
  width:100px;
  height:50px;
}
</style>
<script>
window.onload=function(){
  var canvas, context;
  canvas=document.getElementById("thecanvas");
 
  canvas.style.border="1px solid red";
 
  context=canvas.getContext("2d");
  context.strokeStyle="#99cc33";
  context.fillRect(90,40,20,20);
}
</script>
</head>
<body>
<canvas id="thecanvas"></canvas>
</body>
</html>

上面代码的显示图形如下:

前端教程

上面的代码是将整个画布缩小了一半，所有的内容都缩小了，其实上面的代码依然是在300x150尺寸的画布上绘制的，然后css又将其尺寸缩小了一半，类似于对于img图片的尺寸的缩放。再来看一下正常方式设置尺寸，代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload=function(){
  var canvas, context;
  canvas=document.getElementById("thecanvas");
 
  canvas.width=100;
  canvas.height=50;
  canvas.style.border="1px solid red";
 
  context = canvas.getContext("2d");
  context.strokeStyle="#99cc33";
  context.fillRect(90,40,20,20);
}
</script>
</head>
<body>
<canvas id="thecanvas"></canvas>
</body>
</html>

上面代码的显示图形如下:

前端教程

由效果图可以看出，只是画布的尺寸发生了变化，但是画布上面的图形图像尺寸并没有发生变化。

CSS和canvas标签设置画布尺寸区别，这样的场景在实际项目中还是用的比较多的，关于CSS和canvas标签设置画布尺寸区别就介绍到这了。

回复

我来回复

  • 暂无回复内容