首页手记使用canvas绘制简单图形（下）

使用canvas绘制简单图形（下）

标签：

Html/CSS Html5 JavaScript

绘制圆形

绘制圆形仍然采用绘制路径并填充颜色的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>

    <canvas id="myCanvas"  width="200px" height="200px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>

    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        //fillStyle属性用于指定绘制图形的填充颜色
        context.fillStyle="#ff00ff";
        //beginPath()方法用于开始绘制路径
        context.beginPath();
        //arc()方法参数：arc(x,y,radius,startAngle,endAngle,counterclockwise)
        //参数x，y为起点位置，radius为圆形的半径，startAngle为开始角度，endAngle为结束角度 
        //counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针
        context.arc(100,100,50,0,2*Math.PI,false);
        //closePath()方法用于将图形闭合起来
        context.closePath();
        //fill()方法将图形填充
        context.fill();
    </script>
</body>
</html>

arc()方法原意是为了绘制弧线，所以为了更加了解arc()方法，请看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="200px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        for(var i=0;i<15;i++){
            //fillStyle属性用于指定绘制图形的填充颜色
            context.strokeStyle="#ff00ff";
            //beginPath()方法用于开始绘制路径
            context.beginPath();
            //arc()方法参数：arc(x,y,startAngle,endAngle,counterclockwise)   
            //counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针
            context.arc(0,200,i*10,0,1.5*Math.PI,true);
            //fill()方法将图形填充
            context.stroke();
        }
    </script>
</body>
</html>

你会发现在上面例子中并没有使用closePath()方法，如果使用这个方法，会使路径闭合，具体看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="200px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        for(var i=0;i<15;i++){
            //fillStyle属性用于指定绘制图形的填充颜色
            context.strokeStyle="#ff00ff";
            //beginPath()方法用于开始绘制路径
            context.beginPath();
            //arc()方法参数：arc(x,y,startAngle,endAngle,counterclockwise)   
            //counterclockwise（可选）（逆时针的）这个参数传布尔值，flase表示顺时针，true表示逆时针
            context.arc(0,200,i*10,0,1.5*Math.PI,true);
            //closePath()方法用于将图形闭合起来
            context.closePath();
            //fill()方法将图形填充
            context.stroke();
        }
    </script>
</body>
</html>

绘制实心三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="200px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        context.fillStyle="blue";
        context.beginPath();
        context.moveTo(25,25);
        context.lineTo(150,25);
        context.lineTo(25,150);
        context.fill();
    </script>
</body>
</html>

当然也可以绘制空心三角形，需使用stroke()方法，看下面例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid;}
    </style>
</head>
<body>
        <!--将宽高样式写在内联样式中的style属性也不能达到我们要的效果-->
    <canvas id="myCanvas"  width="200px" height="200px">
        浏览器不支持canvas元素时显示该文本内容
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var context=c.getContext("2d");
        context.strokeStyle="blue";
        context.beginPath();
        context.moveTo(25,25);
        context.lineTo(150,25);
        context.lineTo(25,150);
        context.closePath();
        context.stroke();
    </script>
</body>
</html>

点击查看更多内容