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. 5，Vector

    一,Vector简介 1,Vector 是矢量队列,它是JDK1.0版本添加的类. 2,Vector 继承了AbstractList,实现了List:所以,它是一个队列,支持相关的添加.删除.修改.遍 ...

  2. 如何删除发布服务器distribution

    在建立发布服务器后自动生成distribution数据库为系统数据库,drop无法删除,实际删除方法如下:在“对象资源管理器”-“复制”上点击右键,选择“禁用发布和分发”,依次执行即可完成该系统数据库 ...

  3. C# 修改注册表立即刷新 转载

    修改注册表后不重启计算机并生效,代码如下:const int WM_SETTINGCHANGE = 0x001A; const int HWND_BROADCAST = 0xffff;IntPtr r ...

  4. 字符串（一）：char 数组

    字符串使用方法整理 系列: 字符串(一):char 数组 字符串(二):string 1. 声明 如下是一个例子(=> 表示表达式等价): char a[20] = "abcd&quo ...

  5. Mybatis基于注解开启使用二级缓存

    关于Mybatis的一级缓存和二级缓存的概念以及理解可以参照前面文章的介绍.前文连接:https://www.cnblogs.com/hopeofthevillage/p/11427438.html, ...

  6. Zsh vs. Bash不完全对比解析,zsh是一种更强大的被成为“终极”的Shell

    https://www.zhihu.com/question/21418449 Mort | Zsh vs. Bash:不完全对比解析(1) 2014-10-07  bdpqlxz     Zsh和B ...

  7. 14days laravel

    <?php namespace App\Console\Commands\Mining; use App\Console\Commands\Core\BaseCommand; use App\R ...

  8. STM32 ADC基础与多通道采样

    12位ADC是一种逐次逼近型模拟数字数字转换器.它有多达18个通道,可测量16个外部和2个内部信号源.ADC的输入时钟不得超过14MHZ,它是由PCLK2经分频产生.如果被ADC转换的模拟电压低于低阀 ...

  9. 【大前端攻城狮之路·二】Javascript&QA⼯程师

    今天给大家分享的主题的是Javascript&QA⼯程师.看到这个主题,可能有人问:前端开发完就OK了,剩下的丢给测试就行,哪里还需要关心这些?但事实上呢,测试是前端开发非常重要的环节,也是迈 ...

  10. 腾讯开源微服务架构 Tars，高性能 RPC 开发框架

    腾讯微服务架构 Tars 于今日正式开源. Tars 取名于电影“星际穿越”中的机器人,是支持多语言的高性能 RPC 开发框架和配套一体化的服务治理平台,可以帮助企业或者用户以微服务的方式快速构建稳定 ...