<!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. 发现一个好玩的东西 Web Scraper

    是一个 Chrome 的扩展程序,机智的小爬虫

  2. win10 插入16k采样的耳机无法播放和录音的问题定位

    平时做智能耳机,需要经常在windows上测试不同采样率的声音信号.可是,最近在16k双声道输入的情况下, 无论系统都使用该耳机进行播放,该问题思索了好久,一直没有解决办法. 今天无意中使用了wind ...

  3. Linux - 查看文件信息的三个命令

    ls命令 - list directory contents 显示文件详细信息:ls -l <file name> file命令 - determine file type determi ...

  4. Liferay7 BPM门户开发之20: 理解Asset Framework

    Asset框架用于将您开发的门户内容添加Liferay的核心系统功能.打个比方,你开发了一个事件TodoList管理的插件,在列表显示的时候,你可以集成Asset框架,让你的自定义内容支持Tag标签. ...

  5. Go语言标准库之time

    Go语言标准库之time 时间的格式化和解析 格式化 Format Go语言和其他语言的时间格式化的方式不同,Go语言格式化的方式更直观,其他的语言一般是yyyy-mm-dd package main ...

  6. [EXP]Apache Superset < 0.23 - Remote Code Execution

    # Exploit Title: Apache Superset < 0.23 - Remote Code Execution # Date: 2018-05-17 # Exploit Auth ...

  7. 物体检测，Error: maximum box coordinate value is too large

    使用ssd目标检测,出现error:maximum box coordinate value is larger than 1.100000: ] [1.325] 主要原因在于,用labelImg 标 ...

  8. SQL Server性能优化（14）索引碎片

    一. 外部碎片和内部碎片的概念 碎片的概念和检测,参考MSDN:https://msdn.microsoft.com/zh-cn/library/ms189858.aspx 二.对于碎片的解决办法 解 ...

  9. salesforce lightning零基础学习(六)Lightning Data Service(LDS)

    本篇可参看:https://trailhead.salesforce.com/modules/lightning_data_service Lightning中针对object的detail页面,一个 ...

  10. Spring Boot 解决方案 - 配置

    习惯优于配置 Spring Boot 项目的重要思想就是"习惯优于配置",这也是为什么该项目诞生的原因,让开发者免于 Spring 生态中各种项目的配置.尽管如此,但项目中完全零配 ...