HTML5画布(圆形)
案例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画布(圆形)的更多相关文章
- 使用HTML5画布(canvas)生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- html5 svg 圆形进度条
html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
- HTML5画布生成的3D飞船舰队效果
在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- html5画布基础
canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...
- HTML5 画布参考
描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...
- HTML5画布实现方法:
我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
随机推荐
- ARM 之FIQ(快速中断) IRQ(中断)
IRQ,FIQ定义: 这就是个普通中断,当我们程序定义了该中断,并且在程序运行的时候产生了IRQ中断,则此时的芯片是这样运行的------中断处理器吧利用IRQ请求线来高速ARM,ARM就知道有个I ...
- JAVA中this用法小结[转]
Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...
- scala 入门(2)--数组相关操作
scala 无论从数组的定义还是操作方面来说都跟java非常相似,但又有其独特的强大之处… 1. 定长数组 对于长度不变的数组,可以用scala中的Array. //scala 里使用new实例化对象 ...
- PowerShell中调用外部程序和进程操作命令例子
学习PowerShell,我们不指望通过C#编程去搞定所有事情,我们应该记住cmd.exe或者说批处理给我们留下的宝贵财富——通过调用外部程序去解决问题.调用了外部程序,势必就要对进程进行管理,这就是 ...
- 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+ ( ...
- Centos 添加Root用户
今天,我要描述的是如何在Centos Linux 系统中建立一个和Root账户等权限的用户账户.废话不多说,开始列出必要的操作. 1:首先,我们使用以下命令 进行用户的创建 和 用户密码的初始化. # ...
- c指针点滴5-指针变量计算
//接口dll _declspec(dllexport) void go() { char *p1; int *p2; p1 = (char*)0x30fa83;//每次运行exe的时候输出地址值不同 ...
- Java并发实现一(并发的实现之Thread和Runnable的区别)
package com.subject01; public class ThreadOrRunnable { public static void main(String[] args) { Syst ...
- git 拆库 切库 切分 子目录建库
如果git库目录是这样的: git根目录 project_a/ project_b/ ... 并且想为project_a单独创建一个代码库 # 拉一个新分支 git co -b project_a_r ...
- Javascript: 截取字符串多出来并用省略号[...]显示
/背景知识/ substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数描述 start 必需.一个非负的整数 ...