案例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. ARM 之FIQ(快速中断) IRQ(中断)

    IRQ,FIQ定义:  这就是个普通中断,当我们程序定义了该中断,并且在程序运行的时候产生了IRQ中断,则此时的芯片是这样运行的------中断处理器吧利用IRQ请求线来高速ARM,ARM就知道有个I ...

  2. JAVA中this用法小结[转]

    Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...

  3. scala 入门(2)--数组相关操作

    scala 无论从数组的定义还是操作方面来说都跟java非常相似,但又有其独特的强大之处… 1. 定长数组 对于长度不变的数组,可以用scala中的Array. //scala 里使用new实例化对象 ...

  4. PowerShell中调用外部程序和进程操作命令例子

    学习PowerShell,我们不指望通过C#编程去搞定所有事情,我们应该记住cmd.exe或者说批处理给我们留下的宝贵财富——通过调用外部程序去解决问题.调用了外部程序,势必就要对进程进行管理,这就是 ...

  5. MOUNT MACBOOK DISK (OSX / HFS+) ON UBUNTU 12.04 LTS WITH READ/WRITE

    MOUNT MACBOOK DISK (OSX / HFS+) ON UBUNTU 12.04 LTS WITH READ/WRITE So you want to mount your HFS+ ( ...

  6. Centos 添加Root用户

    今天,我要描述的是如何在Centos Linux 系统中建立一个和Root账户等权限的用户账户.废话不多说,开始列出必要的操作. 1:首先,我们使用以下命令 进行用户的创建 和 用户密码的初始化. # ...

  7. c指针点滴5-指针变量计算

    //接口dll _declspec(dllexport) void go() { char *p1; int *p2; p1 = (char*)0x30fa83;//每次运行exe的时候输出地址值不同 ...

  8. Java并发实现一(并发的实现之Thread和Runnable的区别)

    package com.subject01; public class ThreadOrRunnable { public static void main(String[] args) { Syst ...

  9. git 拆库 切库 切分 子目录建库

    如果git库目录是这样的: git根目录 project_a/ project_b/ ... 并且想为project_a单独创建一个代码库 # 拉一个新分支 git co -b project_a_r ...

  10. Javascript: 截取字符串多出来并用省略号[...]显示

    /背景知识/ substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数描述 start 必需.一个非负的整数 ...