HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)
前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){
var centerPoint = {x:75,y:75};
start_angle = start_angle || 0;
if (canvas_tag.getContext){
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x,centerPoint.y);
ctx.fillStyle="#FF0000";
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
}else{
ctx.closePath();
ctx.stroke();
}
} else {
alert('你需要使用火狐浏览器和苹果浏览器最新版查看!');
}
}
//画一个起始角度为180度，结束角度为270度，绘图方向顺时针的填充扇形
DrawSector(canvas,Math.PI*1/2,Math.PI,50,true,false);
</script>
</body>
</html>
效果如图:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAADJCAIAAAAmSN6vAAADLUlEQVR4nO3cUXEbMRRGYTMIhEAIhIUQCIZgCIZgCAvBEAzBEARBENSHPvQ+JNtpK+nKPeebAMj8J96V156cmmBO2b+AZjM5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4Jsfpnfx0WvFHgclxes/x/p4f2OSHes+xbfmBTX7I5Dgmx+k9x/WaH9jkh3rPse/5gU1+qPccj0d+YJMf6j1HrfmBTX5owBwLvjVXMGCO8zm/scm/N2COBU9wCgbMUUp+Y5N/b8wcq93OFYyZ43LJz2zyb4yZY7Vru4Jhc3x85Jc2+VeGzXG75Zc2+VeGzbHUYzgFI+dY55mMgpFzrHOIUzB4jkVe6AoGz7HIC13B+DlWeCyjYPwctba3N5OvY8oc97vJ1zFrjtxvviqYNUcpmZd3BRPnSLy8K5g7R9bpXcH0OVI+YVMwfY5aE6oryJjj+Zx9lFOQNMfk6gry5phZXUHqHNOqK8ie4/mccZpTsMAcE87wCpaZY+hTGgUrzXG/j7q1K1hsjlKGfOamYMk5ur/cFaw6R6097+4K1p6jlD7fkVXwCnP8DP8vl3oFrzNHre12+8t38ApecI5S2uXyZ/+1QMErz1FK2/d2Pv8+v4L/ZY5a2+PR9r1dr+3zs21b27ZffwoKnAPH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXFMjmNyHJPjmBzH5DgmxzE5jslxTI5jchyT45gcx+Q4JscxOY7JcUyOY3Ick+OYHMfkOCbHMTmOyXF+AGtqTQ1G4qJFAAAAAElFTkSuQmCC" alt="" />
说明如图所示:
aaarticlea/png;base64,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" alt="" />
HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)的更多相关文章
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)
详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...
- jQuery如何检查某个元素在网页上是否存在
$("ID")获取的永远是对象,即使网页上没有此元素.因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码: if($("#ID")){ // ...
- HTML5 source标签：媒介元素定义媒介资源
HTML5 source标签是一种媒介元素(比如 <video> 和 <audio>)来定义媒介资源.<source> 标签允许您规定可替换的视频/音频文件供浏览器 ...
- jQuery检查某个元素在网页上是否存在
jQuery选择器有比较完善的处理机制,用jQuery获取网页中不存在的元素也不会报错,值得注意的是,利用$('#tt')获取的永远是对象,即使网页上没有此元素.当使用jQuery检查某个元素在网页上 ...
- javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置
来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...
- 用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- HTML5的canvas标签制作黑客帝国里的简单画面
1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...
随机推荐
- Java写Excel（不生成实体文件，写为流的形式）
java 写 Excel(不生成实体文件,写为流的形式) public String exportReportExcel(String mediaCode, List<SimpleMediaRe ...
- Django的aggregate()和annotate()函数的区别
aggregate() aggregate()为所有的QuerySet生成一个汇总值,相当于Count().返回结果类型为Dict. annotate() annotate()为每一个QuerySet ...
- JS正则表达式笔记
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个条件的子串等. 正则 描述 ...
- 炒鸡简单的javaScript的call和apply方法
解释一 作者:杨志 链接:https://www.zhihu.com/question/20289071/answer/14644278 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商 ...
- Andrid 打印调用堆栈
public static void printCallStatck() { Throwable ex = new Throwable(); StackTraceElement[] stackElem ...
- Ubantu修改主机名详细步骤
使用vmWare创建的Ubantu虚拟主机,默认的主机名均为Ubantu,通过修改主机名的使得分布式集群操作变得方便.具体步骤如下: 1.查看虚拟机的主机名:打开终端,使用 hostname 命令,回 ...
- linux安装oracle远程客户端
文章参考:http://blog.csdn.net/caomiao2006/article/details/11901123 感谢博友分享O(∩_∩)O~ 安装oracle 远程客户端(一般情况下本地 ...
- LeetCode题目解答
LeetCode题目解答——Easy部分 Posted on 2014 年 11 月 3 日 by 四火 [Updated on 9/22/2017] 如今回头看来,里面很多做法都不是最佳的,有的从复 ...
- 三种block
block的实现原理是C语言的函数指针. 函数指针即函数在内存中的地址,通过这个地址可以达到调用函数的目的. Block是NSObject的子类,拥有NSObject的所有属性,所以block对象也有 ...
- 『JavaScript』核心
弱类型语言 JavaScript是一种弱类型的语言.变量可以根据所赋的值改变类型.原始类型之间也可以进行类型转换.其弱类型的物质为其带来了极大的灵活性. 注意:原始类型使用值传递,复合类型使用引用传递 ...