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. OC + RAC (八) 查看信号状态和跳过信号

    -(void)_test9{ /// RACCommand又叫命令 是用来收发数据的 监听按钮点击,网络请求.... RACCommand * command = [[RACCommand alloc ...

  2. python全栈开发，Day40（进程间通信(队列和管道)，进程间的数据共享Manager,进程池Pool）

    昨日内容回顾 进程 multiprocess Process —— 进程 在python中创建一个进程的模块 start daemon 守护进程 join 等待子进程执行结束 锁 Lock acqui ...

  3. B/S大文件上传解决方案

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  4. luoguP3806 【模板】点分治1

    #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) #define ...

  5. [CSP-S模拟测试]:building（模拟）

    题目传送门(内部题64) 输入格式 第一行有一个整数$id$,表示测试点编号.第二行有四个整数$n,m,k,q$.然后有$k$行,每一行有四个整数$x_{i_1},y_{i_1},x_{i_2},y_ ...

  6. 修改mac下homebrew的源 加快下载速度

    把源改为清华的镜像 # HOMEBREW_BOTTLE_DOMAIN就是目标源 修改这个路径就可以里 echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirro ...

  7. Step2 - How to: Implement a Windows Communication Foundation Service Contract

    This is the second of six tasks required to create a basic Windows Communication Foundation (WCF) se ...

  8. ANTLR4将BF翻译成CPP

    实验环境: 操作系统:windows 10 JAVA:JDK 1.8 antlr:antlr-4.7.1-complete.jar IDE:IntelliJ IDEA 2017.2.7 实验目的: 实 ...

  9. DVBS/S2功能

  10. xpath使用技巧

    爬虫中我们对于元素的定位有多种方法,大致有: Beautifulsoup.Xpath和正则表达式三种方式 其中效率比较为: Beautifulsoup<Xpath<正则表达式 习惯了使用B ...