<!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. liunx 安装jdk

    1 下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2 切换root ...

  2. 1.SpringMVC入门

    创建一个web工程 导入jar 配置web.xml 在web.xml配置前端控制器:DispatcherServlet <?xml version="1.0" encodin ...

  3. 检索COM类工厂中CLSID为{10020100-E260-11CF-AE68-00AA004A34D5}的组件时失败，原因是出现以下错误:80040154

    {"检索 COM 类工厂中 CLSID 为 {10020100-E260-11CF-AE68-00AA004A34D5} 的组件时失败,原因是出现以下错误: 80040154."} ...

  4. rpm is for architecture aarch64 ; the package cannot be built on this system

    问题:rpm is for architecture aarch64 ; the package cannot be built on this system $ sudo alien --to-de ...

  5. Adobe Photoshop CC 2019画板背景色白底如何去掉？

    Adobe Photoshop CC 2019画板背景色白底切透明图片很不方便,有两种方法可以解决: 第一种方法: 新建文档的时候直接背景内容直接选择透明 若设计师提供的设计稿是白底也没关系,就是第二 ...

  6. linux下报错bash: service: command not found

    在linux下操作的时候经常会遇到,bash: service: command not found这个错误,以前在网上找了,照着弄了,也没细看原因,今天又碰到这个问题,就顺便研究一下. 1.通常这种 ...

  7. 《JavaScript面向对象编程指南》读书笔记①

    概述 JavaScript快忘完了,想看一本专业书拾遗,所以看了这本<JavaScript面向对象编程指南>. 个人觉得这本书讲的很透彻很易懂,一些原来有疑惑的地方在这本书里面豁然开朗,看 ...

  8. [宏]__stringify

    Linux内核中有如下两个宏: #define __stringify_1(x...) #x #define __stringify(x...) __stringify_1(x) 写代码测试如下: # ...

  9. canvas图片上传相关学习

    今天主要是研究了canvas的关于图片上传的相关知识, context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  

  10. IdentityServer Token验证

    查看源码:https://github.com/IdentityServer/IdentityServer4/tree/release API使用Client Credentials的token验证是 ...