html5 坐标问题

    最近在研究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>

 错误设置时浏览器显示空白，正确设置时则显示一个刚好能填充页面的红色圆形。

posted @ 2012-08-22 11:28  李土鳖  阅读(533)  评论(1)  编辑  收藏  举报