案例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            cxt.fillStyle="#ff0000";
            cxt.beginPath();
            cxt.arc(70,18,15,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fill();
        }
    </script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">您的浏览器不支持</canvas>

</body>
</html>

效果图：

注释：

（1）开始创建路径：

cxt.beginPath();

（2）创建圆形路径：

cxt.arc( x , y , radius , startAngle , endAngle , anticlockwise )

x为绘制圆形的起点横坐标；y为绘制圆形的起点纵坐标；radius为圆形半径；startAngle为开始角度；endAngle为结束角度，

anticlockwise为是否按顺时针方向进行绘制，true为顺时针，false为逆时针方向绘制。

arc方法不仅可以绘制圆形，也可以用来绘制圆弧，只需指定开始角度与结束角度，如：Math.PI*1;

效果图：

（3）关闭路径：

cxt.closePath();

（4）绘制图形：

cxt.fill();

绘制图形时，除了可以使用fill方法（填充图形），还可以使用stroke方法（绘制图形边框）。

案例2：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            for(var i=0;i<10;i++)
            {
                cxt.beginPath();
                cxt.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                cxt.closePath();
                cxt.fillStyle='rgba(255,0,0,0.25)';
                cxt.fill();
            }
        }
    </script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="500" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>

</body>
</html>

效果图：

如果把上例中开始创建路径语句与关闭路径这一语句删除，会绘制出怎样的图形？

案例3：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            for(var i=0;i<10;i++)
            {
                cxt.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                cxt.fillStyle='rgba(255,0,0,0.25)';
                cxt.fill();
            }
        }
    </script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="500" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>

</body>
</html>
效果图：

HTML5画布（圆形）的更多相关文章

  1. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  2. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  4. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  5. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  6. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  7. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  8. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  9. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

随机推荐

  1. HTML&CSS基础学习笔记1.2-HTML的全局属性？

    HTML元素都有属性,下面的这些全局属性是所有的HTML元素都可以使用的. 常见的有: HTML元素也有一些本身自己独特的属性,我们以后的笔记中有机会,会再为大家介绍哦. 下面是代码测验,具体的内容可 ...

  2. Java学习笔记--String StringBuffer StringBuilder

    String StringBuffer StringBuilder String http://docs.oracle.com/javase/7/docs/api/ 中文: http://www.cn ...

  3. 怎么通过网站优化来增强SEO效果?

    真正好的网站优化不应该针对哪一个搜索引擎,而应该关注用户的需求.搜索引擎把这这用户指标权重提升,实际上也是希望把更多的精力集中在用户体验的提升上面.那么,这些用户指标应该怎样提升呢?方法多种多样,下面 ...

  4. 【转】Android Service完全解析，关于服务你所需知道的一切(下) ---- 不错

    原文网址:http://blog.csdn.net/guolin_blog/article/details/9797169 转载请注册出处:http://blog.csdn.net/guolin_bl ...

  5. 【剑指offer】面试题40：数组中只出现一次的数字

    题目: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 思路: 因为只有两个只出现一次的数字,所以所有数字进行异或之后得到值res一定不是0.这样,res ...

  6. 符号表实现（Symbol Table Implementations）

    符号表的实现有很多方式,下面介绍其中的几种. 乱序(未排序)数组实现 这种情况,不需要改变数组,操作就在这个数组上执行.在最坏的情况下插入,搜索,删除时间复杂度为O(n). 有序(已排序)数组实现 这 ...

  7. 在CentOS/RHEL 6.5上安装Chromium 谷歌浏览器

    之前Google就说了,由于CentOS/RHEL 6已经是过期的系统,所以不再会有Chrome了. 虽然后来由于引起了社区的抗议,从而改口,不再提CentOS/RHEL 6是过期系统了:但是,目前在 ...

  8. CSS3实现三角形

    很多时候我们用到三角形这个效果: 我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的 ...

  9. iOS学习之 plist文件的读写

    在做iOS开发时,经经常使用到到plist文件,  那plist文件是什么呢? 它全名是:Property List,属性列表文件,它是一种用来存储串行化后的对象的文件.属性列表文件的扩展名为.pli ...

  10. Android设置定时执行执行一次任务

    private Handler handler = new Handler(){ public void handleMessage(Message msg) { super.handleMessag ...