<!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. C# Autofac集成之Framework WebAPI

    Web API 2集成需要Autofac.WebApi2 NuGet包. Web API集成需要Autofac.WebApi NuGet包. Web API集成为控制器,模型绑定器和操作过滤器提供了依 ...

  2. 使用FFmpeg如何转发一个RTSP视频流

    版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/6930221.html   转发RTSP流,这类需求一般出现于转发一些摄像头采集视频,并在摄像头上做RTSP ...

  3. IntelliJ Idea 授权服务器使用

    JetBrains授权服务器 1 http://intellij.mandroid.cn/ 支持的版本 IntelliJ IDEA 7.0 或更高ReSharper 3.1 或更高ReSharper ...

  4. 被高通收购的CSR是一家怎样的公司

    CSR plc(LSE:CSR),原名剑桥硅晶无线电或英商剑桥无线电(英语:Cambridge Silicon Radio),是一间创立于 1998年的跨国无厂半导体公司,总部位于英国剑桥.早期技术主 ...

  5. HTTPS 怎样保证数据传输的安全性

    大家都知道,在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的.但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的. 在客户 ...

  6. [视频]K8飞刀 SQL注入点脱库演示教程

    K8飞刀 SQL注入点脱库演示动画教程 链接:https://pan.baidu.com/s/15gLTxiv9v1Te5QNFZnfV4A 提取码:eaa1

  7. 【sping揭秘】16、@After（finally） 但是这个实在afterturning之前执行

    package cn.cutter.start.bean; import org.apache.commons.logging.Log; import org.apache.commons.loggi ...

  8. Java内部类持有外部类的引用详细分析与解决方案

    在Java中内部类的定义与使用一般为成员内部类与匿名内部类,他们的对象都会隐式持有外部类对象的引用,影响外部类对象的回收. GC只会回收没有被引用或者根集不可到达的对象(取决于GC算法),内部类在生命 ...

  9. （转）你真的会写单例模式吗——Java实现

    http://www.runoob.com/design-pattern/singleton-pattern.html 单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好.用对单例模式, ...

  10. 以ActiveMQ为例JAVA消息中间件学习【2】

    前言 之前我们学习了什么是消息中间件,以ActiveMQ为例做了一个最简单的消息中间件的实现.但是我们做的就只能算是个例子而已,因为在实际的项目中肯定会有spring插一脚,所以spring肯定有来管 ...