HTML5使用canvas画图时，图片被自动放大模糊的问题…..

Linux大全评论3.2K views阅读模式

HTML5使用canvas画图在定义canvas的标签的时候，一般是要确定它的高和宽的。不过切记不要定义到样式里面去......否则，里面所画的图片会自动放大或者缩小。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.     <title>JavaScript Platformer 1</title>  
  6.     <style type="text/css">  
  7.       #Map{  
  8.                border:1px solid #000;  
  9.            width:1000px;  
  10.            height:600px;  
  11.       }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <canvas id="Map" >Your browser does not support the canvas element.</canvas>  
  16. </body>  

具体画图的JS就不贴了，就是用的drawImage( image ,  x , y )这个函数而已。悲剧的结果

HTML5使用canvas画图时，图片被自动放大模糊的问题…..

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.     <title>JavaScript Platformer 1</title>  
  6.     <style type="text/css">  
  7.       #Map{border:1px solid #000; }  
  8.     </style>  
  9. </head>  
  10. <body>  
  11.     <canvas id="Map" width="1000" height="600">Your browser does not support the canvas element.</canvas> 时，图片被自动放大模糊的问题.....

企鹅博客
  • 本文由 发表于 2019年10月1日 04:49:20
  • 转载请务必保留本文链接：https://www.qieseo.com/172828.html

发表评论