<!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. Notepad++文本编辑器 快捷键

    Ctrl+C 复制Ctrl+X 剪切Ctrl+V 粘贴Ctrl+Z 撤消Ctrl+Y 恢复Ctrl+A 全选Ctrl+F 键查找对话框启动Ctrl+H 查找/替换对话框Ctrl+D 复制并粘贴当行 C ...

  2. ADB结构及代码分析【转】

    本文转载自:http://blog.csdn.net/happylifer/article/details/7682563 最近因为需要,看了下adb的源代码,感觉这个作者很牛,设计的很好,于是稍微做 ...

  3. Java中的ArrayList

    ArrayList是所谓的动态数组.用一个小例子: import java.util.ArrayList; import java.util.Iterator; import java.util.Li ...

  4. bzoj4516

    后缀自动机 留个板子 upd:大概懂了 每次新加入的npRight集合肯定只有最后一个位置,那么求所有长得不一样的子串贡献就是Max-Min+1,因为Right集合只有这一个位置,所以这Max-Min ...

  5. 一个不当使用fclose引发的异常

    最近服务器上一个后台传输文件的服务,经常会报出异常来,只能强行终止并重启. 昨天刚好有空,现场抓了一下dump,再把程序扔到IDA里看了一下,很快就找出原因了,原来是调用fclose时出错的. 使用C ...

  6. 2.27 MapReduce Shuffle过程如何在Job中进行设置

    一.shuffle过程 总的来说: *分区 partitioner *排序 sort *copy (用户无法干涉) 拷贝 *分组 group 可设置 *压缩 compress *combiner ma ...

  7. Spherical Harmonics Lighting

    [转自:http://www.cnblogs.com/daniagger/archive/2012/05/29/2524133.html] 1.背景知识 1.1 光照表示 之前我们都只考虑光源点和物体 ...

  8. android调用第三方库——第一篇 (转载)

    转自:http://blog.csdn.net/jiuyueguang/article/details/9447245 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言: 这两天一直在研 ...

  9. bzoj1725: [Usaco2006 Nov]Corn Fields牧场的安排(状压dfs)

    1725: [Usaco2006 Nov]Corn Fields牧场的安排 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1122  Solved: 80 ...

  10. CF1045G AI robots（动态开点线段树）

    题意 火星上有$N$个机器人排成一行,第$i$个机器人的位置为$x_{i}$,视野为$r_{i}$,智商为$q_{i}$.我们认为第$i$个机器人可以看到的位置是$[x_{i}-r_{i},x_{i} ...