<!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. A+B Problem && OJ推荐【持续更新】

    目录 List 前言 长郡 Position: code 1. 2. 持续更新,么么哒 List 前言 有没有觉得写这篇文章很奇怪,这个还是有原因的.①很多OJ都有着道题,所以发个博客②这可以介绍很多 ...

  2. hdu 2594 Simpsons’ Hidden Talents（两个串的next数组）

    题意:两个字符串s.t,求s和t的最长的相同的前缀和后缀 思路:先求s的next数组,再求t的next数组(即代码中ex数组,此时不是自己与自己匹配,而是与s匹配),最后看ex[len2]即可(len ...

  3. 【BZOJ 3224】 普通平衡树

    [题目链接] 点击打开链接 [算法] 本题是Splay模板题,值得一做! [代码] #include<bits/stdc++.h> using namespace std; #define ...

  4. http://www.cnblogs.com/Javame/p/3632473.html

    http://www.cnblogs.com/Javame/p/3632473.html

  5. Coursera Algorithms Programming Assignment 3: Pattern Recognition （100分）

    题目原文详见http://coursera.cs.princeton.edu/algs4/assignments/collinear.html 程序的主要目的是寻找n个points中的line seg ...

  6. Get与Post的小知识

    Get与Post的小知识 一.传递参数: Get把参数包含在URL中,而在Post通过request body传递参数.因为参数直接暴露在URL上,GET比POST更不安全,所以不能用来传递敏感信息. ...

  7. FTP服务相关实现

    FTP服务的相关实现 vsftpd介绍 1>vsftpd全名为very secure FTP daemon,为非常安全的FTP服务,是针对操作系统的权限来设计的,这个权限是发起者发起该服务进程的 ...

  8. CodeForces 712C Memory and De-Evolution (贪心+暴力)

    题意:现在有一个长度为 x 的正三角形,每次可以把一条边减小,然后用最少的时间变成长度为 y 的正三角形. 析:一开始,正着想,然后有一个问题,就是第一次减小多少才能最快呢?这个好像并不好确定,然后我 ...

  9. vs code 代码格式化

    1.打开vs code > 文件 > 首选项 > 设置 > 将下面一段粘贴在右侧即可 // Place your settings in this file to overwr ...

  10. bzoj 4622: [NOI 2003] 智破连环阵【dfs+匈牙利算法】

    一个炸弹炸一个区间的武器,想到二分图匹配 但是直接dfs断点显然不行,预处理出dis[i]为i到m的至多值来最优性剪枝,并且标记ok[i][j]为炸弹i可以炸到j武器,mx[i][j]为i炸弹从j武器 ...