<!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. SDUT OJ 周赛 找有毒的那杯水（思维逻辑 + 分治思想 ）

    你打我啊 Time Limit: 500ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 最近看了一个非常好玩的题,如果有972杯水,其中有971个没有毒的,1个有 ...

  2. YTU 2444: C++习题 对象转换

    2444: C++习题 对象转换 时间限制: 1 Sec  内存限制: 128 MB 提交: 914  解决: 581 题目描述 定义一个Teacher(教师)类(教师号,姓名,性别,薪金)和一个St ...

  3. jLim - 紧凑的 JavaScript 框架

    1. [代码][JavaScript]代码     /*! * jLim Core * * jLim is a small JavaScript base code. It can be used t ...

  4. Javascript版五子棋

    Javascript版五子棋,无禁手.欢迎提出算法的改进意见.2. [代码]HTML     <!DOCTYPE html><html>    <head>    ...

  5. 汇编环境的搭建（windows 10 + debug）

    1. debug.exe 安装 win10 版本过高,不再提供 debug.exe,甚至从别处获取的 debug.exe 的也无法运行. 汇编语言学习所需的各种执行文件(debug.exe.link. ...

  6. Centos Missing Library: QtWebKit.so.4

    /******************************************************************** * Centos Missing Library: QtWe ...

  7. macbook pro上安装虚拟机

    第一步:下载MacHunter的app应用商店 第二步:在MacHunter内下载Parallels Desktop虚拟机 第三步:如果在这个商店下载不下来,在网络资源上直接下载Parallels D ...

  8. Java AWT组件开发和Swing界面编程

    一.AWT组件开发 1.AWT AWT是抽象窗口工具箱的缩写,它为编写图形用户界面提供了用户接口,通过这个接口就可以继承很多方法,省去了很多工作.AWT还能使应用程序更好地同用户进行交互. AWT中的 ...

  9. bzoj4750

    单调栈+前缀和 max很明显用单调栈搞,但是异或和呢?异或和我们拆位,对于每段区间的异或和[l[i]-i],[i,r[i]]答案就是0->1,1->0的乘积,但是统计的时候事实上是[l[i ...

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

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