<!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. http响应头里没有或者有content-length的几种可能性

    对于http的请求返回结果要进行内容的长度校验主要有两种方式,二者互斥使用 1.客户端在http头(head)加Connection:keep-alive时,服务器的response是Transfer ...

  2. 你可能不知道的viewport

    概述 前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是 ...

  3. VS Code：让你工作效率翻倍的23个插件和23个编辑技巧

    VS Code:让你工作效率翻倍的23个插件和23个编辑技巧 总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来. 文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问. ...

  4. hdu 5972---Regular Number(字符串匹配)

    题目链接 Problem Description Using regular expression to define a numeric string is a very common thing. ...

  5. firefox设置每次访问时检查缓存

    1.在firefox的地址栏上输入about:config回车2.找到browser.cache.check_doc_frequency选项,双击将3改成1保存即可. 选项每个值都是什么含义的.请看下 ...

  6. shell中mail发邮件的问题

    今天为了监控一下脚本,按照网上说的利用mail 发邮件,mail -s "error预警2" peien@1221.qq.com<'邮件内容',发现出现cc,不知道啥问题,也 ...

  7. android开发学习——day8

    关于UI学习的总结 EditText的练习 MainActivity.java代码 package test.example.com.ch02_button; import android.suppo ...

  8. 《深入分析Linux内核源代码》读书、私藏笔记大放送

    秉承着"不懂操作系统原理的程序员不是合格的程序员"的至理名言,鄙人又是买陈莉君老师的“Linux教学视频”,又是研读其力作<深入分析Linux内核源代码>,先将总结笔记 ...

  9. 【OSX】build AOSP 2.3.7时的build error解决

    原始的error log: ============================================ PLATFORM_VERSION_CODENAME=REL PLATFORM_VE ...

  10. java ee期末项目相关

    1.项目简介 本项目是对纸杯生产进行管理的的一个系统,从前端接收到订单,然后根据订单内容进行纸杯的生产.如下为该系统的总流程图: 1.项目系统架构图 3.系统用例图 4.ER图 主要的代码和相关文件见 ...