demo.html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>arc</title>

   <script>

       function init()  {

           var canvas=document.getElementById('canvas');

           var ctx=canvas.getContext("2d");

            ctx.beginPath();

            ctx.arc(100,100,80,0,1.5*Math.PI,false);

            ctx.closePath();

            ctx.fillStyle="#ccc";

            ctx.fill();

       }

   </script>

</head>

<body   onload="init();">

<canvas  id="canvas" width="400"  height="300"  style="border:2px blueviolet solid"></canvas>

</body>

</html>

　　效果：

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

  • 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • 起始角：arc(100,75,50,0,1.5*Math.PI)
  • 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

2017-09-08  12:54:48

HTML5 arc的例子的更多相关文章

  1. HTML5显示地图例子

    html 5获取GPS位置,Google地图显示 场景: JQuery Mobile 代码片段: <script type="text/javascript"> $(' ...

  2. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. arc路径例子-磊哥

       <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    & ...

  4. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  7. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  8. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  9. html5 Worker学习

    HTML: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <t ...

随机推荐

  1. redis学习 --Sorted Set

    一.概述: Sorted Set(有序集合)和Set类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted Set中的每一个成员都会有一个分数(sc ...

  2. php实现进度条原理

    PHP实现进度条的原理: 模版替换,在页面设置一个标识,轮子自己的页面,不发请求给服务器,由服务器端获得进度,然后替换该页面标识,达到进度条效果. 页面代码: 1 2 3 4 5 6 7 8 9 10 ...

  3. PHPcms编辑器如何粘贴带格式的word文档

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  4. Python_005(字典无极坑)

    一.字典(dict) 1.字典的定义格式:dic{key1:value1,key2,value2} :这里面key是唯一的,保存的时候,根据key计算一个内存地址,然后将key-value保存在这个地 ...

  5. spash和selenium浅析

    Splash是什么: Splash是一个Javascript渲染服务.它是一个实现了HTTP API的轻量级浏览器,Splash是用Python实现的,同时使用Twisted和QT.Twisted(Q ...

  6. 使用debugger在程序中加入断点

    使用debugger在程序中加入断点 版权声明:本文为博主原创文章,未经博主允许不得转载. 我们可以在程序中加入debugger语句,这样Firefox的调试工具会停留在这条语句上,代码也暂停执行,和 ...

  7. django中的url控制

    1.django中的第一个控件:url控制  (路由分发) urls.py:请求路径与视图函数的之间的关系 步骤: 1.首先是要配置环境,   2.其次就是引路径   3.在视图的文件夹里面写相应的函 ...

  8. tr:hover变色的问题

    做表格隔行变色(高亮显示),可以通过设置css中的 tr:hover伪类属性达到效果, 但是,会出一点小问题.td的背景色会覆盖tr的背景色, 在tr:hover下边加上一句:tr:hover td{ ...

  9. pandas向左移动非空单元格

    碰到个小问题, 因为需要更改excel 的行为. 处理最多的还是excel的事, 不过看起来是excel.实际上对pandas 的库的熟悉.读取,更改,应用等等,方法. 十分有用. 先说需求,本来的表 ...

  10. IQueryable不能使用异步方法的解决方案

    ---恢复内容开始--- 看见别人用Linq to Sql的Async好久了,我还没开始用,感觉太土了,跟不上潮流了,打开vs,就准备写个查询,然后发现我用一个IQueryable的对象,怎么都点不出 ...