<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas>

<script>

    window.onload = function(){

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

        canvas.width = 1024;

        canvas.height = 768;

        if(canvas.getContext('2d')){

            var context = canvas.getContext('2d');

            context.lineWidth = 5;

            context.strokeStyle = "#005588";

            for(var i=0;i<10;i++){

                context.beginPath();

                context.arc(50+i*100,50,40,0,2*Math.PI*(i+1)/10,false);

                context.closePath();

                context.stroke()

            }

            for(var i=0;i<10;i++){

                context.beginPath();

                context.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false);

                // context.closePath();

                context.stroke()

            }

            for(var i=0;i<10;i++){

                context.beginPath();

                context.arc(50+i*100,350,40,0,2*Math.PI*(i+1)/10,false);

                context.closePath();

                context.stroke();

                context.fillStyle ="#005588"

                context.fill();

            }

        }else{

            alert('当前游览器不支持Canvas，请更换游览器后再试！');

        }

    }

</script>

</body>

<script>

/*

  总结

  context.arc(

    （圆心x 圆心y  半径r）

    centerx,centery,radius,

    （起始角度，终止角度）

    startingAngle,endingAngle,

    (false 顺时针绘制)

    anticlockwise = false

  )

*/

</script>

</html>

canvas-arc.html的更多相关文章

  1. HTML5 Canvas arc()函数//////////////////////(转)

    HTML5 Canvas arc()函数   实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...

  2. HTML5 Canvas arc()函数

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  3. HTML5 Canvas Arc Tutorial

    HTML5 Canvas Arc Tutorial HTML5 Canvas Arc Tutorial  

  4. 对canvas arc()中counterclockwise参数的一些误解

    一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法,对它的认识比较模糊,导致犯了一些错误,特发此文,以纠正之前的错误理解. arc()方法定义如下: arc() 方 ...

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

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

  6. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  7. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  8. 基于canvas的电子始终

    //code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

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

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

  10. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

随机推荐

  1. Docker集群管理工具 - Kubernetes 部署记录 (运维小结)

    一.  Kubernetes 介绍 Kubernetes是一个全新的基于容器技术的分布式架构领先方案, 它是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernete ...

  2. WebService接口定义及调用

    Web service是一个平台独立的,松耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML标准来描述.发布.发现.协调和配置这些应用程序,用于开发分布式的互操作的应用程序. WebS ...

  3. ZKWeb网页框架1.8正式发布

    1.8.0更新的内容有 破坏性更新 更新ZKWeb.System.Drawing到3.0.0 请修改源代码中的System.Drawing到System.DrawingCore 现在已经不再需要使用D ...

  4. 聚簇索引（clustered index ）和非聚簇索引（secondary index）的区别

    这两个名字虽然都叫做索引,但这并不是一种单独的索引类型,而是一种数据存储方式.对于聚簇索引存储来说,行数据和主键B+树存储在一起,辅助键B+树只存储辅助键和主键,主键和非主键B+树几乎是两种类型的树. ...

  5. Markdown新手教程

    目录 什么是Markdown? 用Markdown写作有什么优缺点? 有哪些比较好的Markdown写作工具? markdown语法 标题 水平分区线 引用 中划线 斜体 粗体 斜粗体 链接 图片 无 ...

  6. 使用js做LeetCode

    概述 无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...

  7. .NET手记－Autofac进阶(属性和方法注入 Property and Method Injection)

    尽管构造函数参数注入是传递参数值给当前构造的组件的优先方式,但是你也可以使用属性或者方法注入来提供参数值. 属性注入使用可写入的变量而不是构造函数参数来完成注入.方法注入则通过方法来设置依赖项. 属性 ...

  8. 线程误区-join，wait（里边还是调用的wait）

    1.一个线程执行结束后会执行该线程自身对象的notifyAll方法,这个是在jvm中实现的. 2.join的作用是:当我们调用某个线程的这个方法时,这个方法会挂起调用线程,直到被调用线程(thread ...

  9. 【xsy2305】喽 计算几何

    UPD:这个做法被hack了 题目大意:给你$n$个红点和$m$个黑点,问你至少需要保留多少个黑点,才能用由黑点组成的凸包包住所有红点. 数据范围:$n≤10^5$,$m≤500$ 首先,我们将红点和 ...

  10. 如何用python爬取两个span之间的内容

    Python用做数据处理还是相当不错的,如果你想要做爬虫,Python是很好的选择,它有很多已经写好的类包,只要调用,即可完成很多复杂的功能,此文中所有的功能都是基于BeautifulSoup这个包. ...