javascript学习之路六------Canvas绘图

定一个画布：

<canvas id="drawing" width="600" height="300">这是一个画布</canvas>

判断当前浏览器是否支持canvas

//用之前一定要先看看支不支持
        if(draw.getContext){
            //选用2D画布
            var context=draw.getContext("2D");
        }

2D可以做什么呢？简单的矩形，弧形，路径都可以画，远点坐标（0，0）左上角

<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
    <!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
    <!-- 内容区域 -->
    <script>
        var myCanvas = document.getElementById("myCanvas");
        //用之前一定要先看看支不支持
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            ctx.fillStyle = "#0000ff";
            ctx.fillRect(20, 20, 150, 100);
        }
    </script>

绘制填充颜色的两个矩形：

<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
    <!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
    <!-- 内容区域 -->
    <script>
        var myCanvas = document.getElementById("myCanvas");
        //用之前一定要先看看支不支持
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            ctx.fillStyle = "#ff0000";
            ctx.fillRect(20, 20, 50, 50);
            ctx.fillStyle = "rgb(0,0,255,0.5)";
            ctx.fillRect(30, 30, 50, 50);
        }
    </script>

绘制两个带描边的矩形：

<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
    <!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
    <!-- 内容区域 -->
    <script>
        var myCanvas = document.getElementById("myCanvas");
        //用之前一定要先看看支不支持
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            ctx.strokeStyle = "#ff0000";
            ctx.strokeRect(20, 20, 50, 50);
            ctx.strokeStyle = "rgb(0,0,255,0.5)";
            ctx.strokeRect(30, 30, 50, 50);
        }
    </script>

其他的控制属性：

<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
    <!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
    <!-- 内容区域 -->
    <script>
        var myCanvas = document.getElementById("myCanvas");
        //用之前一定要先看看支不支持
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            ctx.lineWidth=5;//线条宽度
            ctx.lineCap="round";//线条末端的形状butt(平)、round(圆)、square(方)
            ctx.lineJoin="bevel";//线条相交的方式round(圆角)、bevel(斜角)、miter(斜接)
            ctx.strokeStyle = "#ff0000";
            ctx.strokeRect(20, 20, 50, 50);
            ctx.strokeStyle = "rgb(0,0,255,0.5)";
            ctx.strokeRect(30, 30, 50, 50);
        }
    </script>

清除指定区域：

<canvas id="myCanvas" width="600" height="300">这是一个画布</canvas>
        <!-- <div id="box" style="width: 600px;height:300px;background: red;"></div> -->
        <!-- 内容区域 -->
        <script>
            var myCanvas = document.getElementById("myCanvas");
            //用之前一定要先看看支不支持
            if (myCanvas.getContext) {
                var ctx = myCanvas.getContext("2d");
                ctx.fillStyle = "#ff0000";
                ctx.fillRect(20, 20, 50, 50);
                ctx.fillStyle = "rgb(0,0,255,0.5)";
                ctx.fillRect(30, 30, 50, 50);
                ctx.clearRect(40,40,10,10);
            }
        </script>

未完待续…