<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>arc</title>

</head>

<body>

<canvas id="canvas" style="border: 1px solid #ddd;"></canvas>

<script>

    //draw an arc画曲线

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

    canvas.width = 1024;

    canvas.height = 768;

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

    context.lineWidth = 5;

    context.strokeStyle = "#058";

    context.arc(300,300,200,0,0.5*Math.PI,true);

    //context.arc(

    //conterx,contery,radius,//圆心坐标x,圆心坐标y,半径

    //startingAngle,endingAngle,//起始弧度值，终止弧度值

    //anticlockwise = false//false顺时针绘制，true逆时针绘制

    // );

    context.stroke();

</script>

</body>

</html>

绘制单个圆：

绘制多个圆：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>arc*n</title>

</head>

<body>

<canvas id="canvas" style="border: 1px solid #ddd"></canvas>

<script>

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

    canvas.width = 1024;

    canvas.height = 768;

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

    context.lineWidth = 5;

    context.strokeStyle = "#058";

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

        context.beginPath();//重新开始新的路径

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

        context.closePath();//结束当前路径，自动绘制封闭未封闭的线段

        context.stroke();

    }

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

        context.beginPath();//重新开始新的路径

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

        context.stroke();

    }

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

        context.beginPath();//重新开始新的路径

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

        context.closePath();//结束当前路径，自动绘制封闭未封闭的线段

        context.stroke();

    }

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

        context.beginPath();//重新开始新的路径

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

        context.stroke();

    }

    //填充图形；

    context.fillStyle = "#058";

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

        context.beginPath();//重新开始新的路径

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

        context.fill();

    }

</script>

</body>

</html>

canvas基础绘制-arc的更多相关文章

  1. canvas基础绘制-绚丽倒计时

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. canvas基础绘制-绚丽时钟

    效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTim ...

  3. canvas基础绘制-一个小球的坠落、反弹

    效果如图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. canvas基础绘制-倒计时(上)

    效果: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. canvas基础绘制-倒计时(下)

    digit_1.js: digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0 ...

  6. 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^

    对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...

  7. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  8. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  9. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

随机推荐

  1. IntelliJ IDEA 注册码 有效期截止于2018/10/14

    来源: http://idea.lanyus.com/ IntelliJ IDEA 注册码: EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW ...

  2. MYSQL进阶学习笔记六：MySQL视图的创建，理解及管理！（视频序号：进阶_14,15)

    知识点七:MySQL视图的创建(14) 视图的定义: 什么是视图: 视图数由查询结果形成的一张虚拟的表. 什么时候要用到视图? 如果某个查询结果出现的非常频繁,也就是,要经常拿这个查询结果来做子查询. ...

  3. codeforces B. Online Meeting 解题报告

    题目链接:http://codeforces.com/problemset/problem/420/B 题目意思:给出一段连续的消息记录:记录着哪些人上线或者下线.问通过给出的序列,找出可能为lead ...

  4. 关于include，load的几个问题

    参考:http://www.network-theory.co.uk/docs/gccintro/gccintro_17.html 1. include的文件在哪找,找不到会如何? 工具: gcc - ...

  5. hdu1226

    hdu1226 :点击打开题目链接 本题目由于题目意思,容易得知是一道广搜的题目. 首先. 我们需要知道 ,大数取模,比如 如何判断1234567 对15 取模的数为多少?答案是7,但是如果他是大数怎 ...

  6. 为datanode配置多个数据存储地

    datanode配置多个数据存储地址,涉及到以下两个配置项 dfs.name.dir Determines where on the local filesystem the DFS name nod ...

  7. 修改RedHat的系统显示时间

    1.修改日期 date -s 12/21/2012 2.修改时间 date -s 15:14:00 3.检查硬件(CMOS)时间 clock -r 4.将系统时间写入CMOS clock -w 切记四 ...

  8. Laravel 新增的Switch模板控制语句非常不错

    切换语句switch语句可以使用来构建,,,和指令:@switch@case@break@default@endswitch @switch($i) @case(1) First case... @b ...

  9. margin-负值

    总结:margin负值的影响: 当元素(块级元素)没有设置宽度时:margin负值会增加元素的宽度,当设置宽度时,margin负值只会影响元素的位置. 就是负的边距好像能减小元素在文档流中的尺寸一样, ...

  10. 024--python re、logging、configparser、hashlib模块

    一.re模块 re模块又称正则表达式是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 C 编写的匹 ...