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. 阿里云Kubernetes服务 - Service Broker快速入门指南

    4月底阿里云容器服务上线了基于Kubernetes集群的服务目录功能.阿里云的容器的服务目录遵循Open Service Broker API标准,提供了一系列的服务代理组件,实现了对主流开源服务如M ...

  2. redis学习 --Hash

    一:我们可以将Redis中的Hash类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Age等.如果H ...

  3. CF1037H Security 后缀自动机 + right集合线段树合并 + 贪心

    题目描述: 给定一个字符串 $S$ 给出 $Q$ 个操作,给出 $L,R,T$,求出字典序最小的 $S_{1}$ 为 $S[L...R]$的子串,且 $S_{1}$ 的字典序严格大于 $T$. 输出这 ...

  4. [CSP-S模拟测试]:传递（暴力+bitset）

    题目描述 我们称一个有向图$G$是传递的,当且仅当对于图$G$的三个不同顶点$a,b,c$,若图$G$中有一条边从$a$到$b$且有一条边从$b$到$c$,那么图中也有一条边从$a$到$c$.我们称一 ...

  5. js数组声明+split()方法

    split()方法:var words = sentence.split(' '): "hello".split("", 3) //可返回 ["h&q ...

  6. redirect thread aborted

    Why Response.Redirect causes System.Threading.ThreadAbortException? The correct pattern is to call t ...

  7. JS-立即执行函数表达式（IIFE）

    javascript 函数调用 在 javascript 中,每一个函数在被调用的时候都会创建一个执行上下文,在该函数内部定义的变量和函数只能在该函数内部被使用,而正是因为这个上下文,使得我们在调用函 ...

  8. 127、TensorFlow 计算图执行(二)

    import tensorflow as tf # Define a placeholder that expects a vector of three floating-point values ...

  9. 测开之路七十七：性能测试蓝图之js

    //定义全局的editor = nullvar editor = null; //ace_editor的初始化函数function ace_editor() { var editor = ace.ed ...

  10. JavaScript高级程序设计（第3版） 第四章（变量、作用域和内存问题）

    4.1 基本类型和引用类型的值             1.基本类型的值是(简单的数据段),引用类型的值是(保存在内存中的对象). 基本类型的值在内存中占据固定大小的空间,因此被保存在栈中.(lifo ...