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

来源：互联网发布：如何自学算命知乎编辑：程序博客网时间：2024/05/17 22:51

被这个折腾了2个小时

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

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>JavaScript Platformer 1</title>    <style type="text/css">      #Map{               border:1px solid #000;       width:1000px;       height:600px;  }    </style></head><body><canvas id="Map" >Your browser does not support the canvas element.</canvas></body>

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

修改之后的HTML

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>JavaScript Platformer 1</title>    <style type="text/css">      #Map{border:1px solid #000; }    </style></head><body><canvas id="Map" width="1000" height="600">Your browser does not support the canvas element.</canvas></body>