前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了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)的更多相关文章

  1. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  3. jQuery如何检查某个元素在网页上是否存在

    $("ID")获取的永远是对象,即使网页上没有此元素.因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码: if($("#ID")){ // ...

  4. HTML5 source标签：媒介元素定义媒介资源

    HTML5 source标签是一种媒介元素(比如 <video> 和 <audio>)来定义媒介资源.<source> 标签允许您规定可替换的视频/音频文件供浏览器 ...

  5. jQuery检查某个元素在网页上是否存在

    jQuery选择器有比较完善的处理机制,用jQuery获取网页中不存在的元素也不会报错,值得注意的是,利用$('#tt')获取的永远是对象,即使网页上没有此元素.当使用jQuery检查某个元素在网页上 ...

  6. javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

    来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...

  7. 用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  9. HTML5的canvas标签制作黑客帝国里的简单画面

    1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...

随机推荐

  1. Document .load与Document .ready的区别

    页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待执行的函 ...

  2. hash和history的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在url中hash 带了一个很丑的 # ,而history是没有#的.vue默认使用ha ...

  3. JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型

    面向对象的三大特性: 封装 a)  把一些属性和方法装到一个对象里 2.  继承 a)  js中的继承是指:   一个对象没有一些方法和属性,而另一个对象有 把另一个个对象的属性和方法,拿过来自己用, ...

  4. C#中在WebClient中使用post发送数据实现方法

    很多时候,我们需要使用C#中的WebClient 来收发数据,WebClient 类提供向 URI 标识的任何本地.Intranet 或 Internet 资源发送数据以及从这些资源接收数据的公共方法 ...

  5. PHP Laravel 5.4 环境搭建

    1.php运行环境搭建 在win10系统上进行搭建的,使用的是wamp环境  wampserver3_x86_apache2.4.17_mysql5.7.9_php5.6.15.exe,安装包中集成了 ...

  6. python_day4_shopping

    购物车例子,实现显示商品信息,输入商品编号并且可以减去自己的存入余额,当商品价格大于自己的余额的时候,直接退出:当不再选择商品的时候,退出显示余额和已经添加的商品. #购物车程序 product_li ...

  7. JavaScript实现判断图片是否加载完成的3种方法整理

    JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示 ...

  8. uva 12096 - The SetStack Computer（集合栈）

    例题5-5 集合栈计算机(The Set Stack Computer,ACM/ICPC NWERC 2006,UVa12096) 有一个专门为了集合运算而设计的"集合栈"计算机. ...

  9. Linux-Shell脚本编程-学习-8-函数

    在这章往后的学习中,我讲尽可能详细的讲书中讲到的都记录到这里,以便以后方便查看. 什么是函数,函数就是一段代码,这段代码可以在我们需要的位置调用,那么这段代码就叫做函数. 在Shell中,定义一个函数 ...

  10. Qt 解析网络数据出现ssl错误

    最近写了点小东西,哈哈, 网络部分是同学帮我搞的 在编译的时候,出现了一下错误 qt.network.ssl: QSslSocket: cannot call unresolved function ...