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"/> ...
随机推荐
- 浅谈React虚拟DOM
为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...
- cnpm 下载
1, 如果电脑已经有node的话,可以先卸载,然后再去node官网下载最新node, 2,先全局安装cnpm, npm install -g cnpm --registry=https://regis ...
- I/O流、文件操作
1)操作文件 Path和Files是在JavaSE7中新添加进来的类,它们封装了在用户机器上处理文件系统所需的所有功能.Path表示的一个目录名序列,其后还可以跟着一个文件名.路径中的第一个参数可以是 ...
- 廖老师的Python教程——Python简介
一直想了解下Python,今儿在外面办事排队的时候,打开了廖老师的官网,找到了Python教程.虽然只是一篇关于Python的简介,但是通过将Python的特性与C进行对比,很生动地归纳了Python ...
- django的HttpResponse对象
服务器接收到http协议的请求后,会根据报文创建HttpRequest对象,这个对象不需要我们创建,直接使用服务器构造好的对象就可以.视图的第一个参数必须是HttpRequest对象,在django. ...
- hack游戏攻略（黑吧安全吧的黑客闯关游戏）古墓探秘
2019.2.11 这个是找到的一个黑客游戏,就是一关一关,挺像ctf的,玩玩也挺有意思,还能涨知识. 地址:http://hkyx.myhack58.com/ 入口: 入口就是这样的.提示是 图内有 ...
- Go搭建一个Web服务器
package main import ( "fmt" "net/http" "strings" "log" ) fun ...
- Redis的RDB与AOF介绍（Redis DateBase与Append Only File）
RedisRDB介绍(Redis DateBase) 在指定的时间间隔内将内存中的数据集快照写入磁盘,也就是行话讲的Snapshot快照,它恢复时是将快照文件直接读到内存里 一.是什么? Redis会 ...
- GIT LFS 使用笔记
一.背景 由于git上传文件大小受限,所以我们需要使用GIT LFS对大小超过一定上限的大文件进行处理. 二.安装 linux上安装参见 https://askubuntu.com/questions ...
- 使用 MySQL 存储 Hue 元数据
1.在 MySQL 中增加数据库 hue 2.编辑 hue.ini 文件 [[database]] # Database engine is typically one of: # postgresq ...