html5 canvas学习

浏览数：59 / 时间：2015年06月09日

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <canvas width ="800" height="500" style=" background:yellow" id="canvas"></canvas>
    <script type="text/javascript">

        /*
            1:获取dom 对象
            2:获取绘图对象
            3：进行操作
                如画线 画圆 方形 等
        */
        //获取dom 对象
        var canvas = document.getElementById(‘canvas‘);
        //获取绘图对象
        var cxt = canvas.getContext(‘2d‘);

        //设置画笔的宽度

        //如画一条线 moveTo(x,y)表示你要画的开始位置
        // lineTo(x,y) 表示你要画到哪里，也就是拉到哪里
        //stroke()表示执行 moveTo和lineTo命令
        cxt.moveTo(20, 20);
        cxt.lineTo(100, 20);
        cxt.stroke();
        //closePath 封闭路径 表示画的终点封闭
        cxt.closePath();

        //画一个空心圆形    凡是路径图形必须有开起路径，画完了要封闭新路径
        //beginPath表示开启一个新路径
        cxt.beginPath();
        //arc(x,y,半径,角度范围1,角度范围2,顺或逆)是一个画圆 曲线等方法
        cxt.arc(200, 200, 50, 0, 360, false);
        cxt.stroke();
        cxt.closePath();

        //画一个实心圆形
        cxt.beginPath();
        //设置填充的颜色
        cxt.fillStyle = "rgb(255,0,0)";
        cxt.arc(200, 100, 50, 0, 360, false)
        cxt.fill();
        cxt.stroke();
        cxt.closePath();

        /*画一个矩形 矩形方法不属于路径图形所以不需
          封闭路径以及开启路径,但是由于有时候需要
          填充颜色或者其它方法,所以还是画一个图形
          开启一个:
               cxt.beginPath();
       
               cxt.closePath();
         
        */
        //rect(x,y,宽,高)
        cxt.beginPath();
        cxt.rect(300, 20, 100, 100);
        cxt.stroke();
        cxt.closePath();

        //直接画
        cxt.strokeRect(300, 150, 100, 100);

        //实心矩形 
        cxt.beginPath();
        cxt.rect(300, 350, 100, 100);
        cxt.fill();
        cxt.closePath();

        //其他方法 这种方法最方便
        cxt.fillRect(100, 400, 100, 100);

        //设置文字
        cxt.font = "80px 黑体";
        cxt.fillText("无兄弟，不编程", 20, 230);
        //空心字,没有填充功能
        cxt.strokeText("无兄弟,不篮球", 20, 350);

        //画图 不同浏览器的支持不一样
        var img = new Image();
        img.src = "bl.gif";
        //drawImage(要画的对象，x,y,宽,高)
        cxt.drawImage(img, 20, 37, 230, 306);

        //画三角形
        cxt.beginPath();
        cxt.moveTo(300, 500);
        cxt.lineTo(400, 350);
        cxt.lineTo(350, 450);
        cxt.closePath();

        cxt.stroke();

        //旋转图片
        //设置旋转环境 save表示把当前设置好的环境保存好
        cxt.save();
        //图片设计旋转
        //设置旋转角度 
        cxt.rotate(30*Math.PI/180);
        //旋转一个线段
        cxt.beginPath();
        cxt.moveTo(20, 20);
        cxt.lineTo(20, 100);
        cxt.stroke();
        cxt.closePath();
        //创建旋转空间
        cxt.restore();



    </script>
</body>
</html>