HTML5 Canvas 基本图形画法

本文将不断增加Canvas基本图形的画法和一些简单的操作。

首先，我们需要添加一个Canvas标签

<canvas id="one"></canvas>

然后，获取canvas DOM对象，并进行一些简单的设置

<script type="text/javascript">

        var canvas = document.getElementById("one");

        var ctx = canvas.getContext("2d");
        //setting the width and height of canvas
        canvas.width = 800;
        canvas.height = 600;

        //填充canvas背景
        ctx.fillStyle='#333';
        ctx.fillRect(0,0,800,600);

        //画一条线
        ctx.beginPath();
        ctx.moveTo(10, 0);  
        ctx.lineTo(10, 400);  
        ctx.stroke();

        //画一个弧线，并填充。
        ctx.fillStyle="#f00";
        ctx.beginPath();
        //arc(x, y, radius, startAngle, endAngle, counterclockwise)
        /*
        *参数说明
        * x, y                    圆心的坐标
        * radius                半径
        * startAngle, endAngle 起始和结束的弧度，起始位置为3点钟方向
        * coutnerclockwise     顺时针还是逆时针 false顺时针 true逆时针
        */
        //正圆
        ctx.beginPath();
        ctx.arc(150,150,50,0,Math.PI * 2,true);
        ctx.closePath();
        ctx.fill();

        //半圆
        ctx.beginPath();
        ctx.arc(150,260,50,0,Math.PI,true);
        ctx.closePath();
        ctx.fill();

        // 1/4
        ctx.beginPath();
        ctx.arc(150,370,50,0,Math.PI / 2 ,false);
        ctx.closePath();
        ctx.fill();

        // 1/8
        ctx.beginPath();
        ctx.arc(150,480,50,0,Math.PI / 4 ,false);
        ctx.closePath();
        ctx.fill();


    </script>

 

效果如图：