最近在研究html5, 主要是随便画一些东西。结果一个问题纠结了好久，主要现象就是画出来的东西和我设置的坐标不符合，看起来总有点被放大模糊的感觉。最好总算找到了原因，是因为canvas的高宽设置问题。canvas有自己的width和height属性，设置其样式的高宽对绘图会产生副作用。
canvas的默认高宽在chrome里是300px * 150px, 这个可能因浏览器不同有区别。如果你只是设置了style的高宽，例如下面的代码：
var canvas = document.getElementById("myCanvas"); canvas.style.width = window.innerWidth + "px"; canvas.style.height = window.innerHeight + "px";
那只是改变了canvas的现实区域的大小，canvas的大小仍然是默认值300px * 150px，其最后结果就是一个小canvas被放大后显示在和你设置的高宽匹配的区域里。这当然不是我们期望的，正确的做法应该是直接设置canvas的高宽：
var canvas = document.getElementById("myCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight;
下面是个简单的例子，大家可以测试一下：
<!DOCTYPE html> <meta charset="UTF-8"/> <title>花花</title> <canvas id="content" style="position:absolute;left:0px;top:0px;"> 你的浏览器不支持 </canvas> <script type="text/javascript"> //通过id获取元素 function _id(id) { return document.getElementById(id); }; var painter = { cxt: null, w: window.innerWidth, h: window.innerHeight, init: function() { var content = _id("content"); //1.错误的设置方法 //content.style.width = this.w + "px"; //content.style.height = this.h + "px"; //2.正确的设置方法 content.width = this.w; content.height = this.h; this.cxt = content.getContext("2d"); }, drawRainbow: function() { var centerX = this.w / 2; var centerY = this.h / 2; var radius = this.h / 2; var startingAngle = 2 * Math.PI; var endingAngle = 0 * Math.PI; var counterclockwise = false; this.cxt.fillStyle = "red"; this.cxt.beginPath(); this.cxt.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); this.cxt.fill(); } }; painter.init(); painter.drawRainbow(); </script>
错误设置时浏览器显示空白，正确设置时则显示一个刚好能填充页面的红色圆形。