<!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. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  2. LoadRunner检查点使用小结

    LR中检查点有两种:图片和文字. 常用检查点函数如下: 1)web_find()函数用于从 HTML 页中搜索指定的文本字符串: 2)web_reg_find()函数注册一个请求,以在下一个操作函数( ...

  3. html5--6-4 CSS选择器

    html5--6-4 CSS选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用 ...

  4. 【转载】u3d游戏客户端架构（---）

    原文:http://blog.csdn.net/xtxy/article/details/8474506 主要是mvc架构, M层为数据层,两个用途:1保存数据:2发送数据更新信息: V层为视图层,两 ...

  5. 简单的JDBC封装

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  6. bzoj 4260 REBXOR —— Trie树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 用 Trie 树可以找出前缀异或的最大值和后缀异或的最大值,拼起来即可: 注意要先加入 ...

  7. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  8. 【旧文章搬运】分析了一下360安全卫士的HOOK(二)——架构与实现

    原文发表于百度空间及看雪论坛,2009-10-14 看雪论坛地址:https://bbs.pediy.com/thread-99460.htm 刚发这篇文章的时候,因为内容涉及360的核心产品,文章被 ...

  9. windows动态磁盘导致的分区问题

    上次说到由于装双系统导致我的win7启动不了了,一直以为是不是在ubuntu的安装界面点错了什么东西导致的,甚至认为是不是server的安装程序有点bug,直到今天继续折腾才发现了问题所在,跟ubun ...

  10. shell初级-----数据呈现方式

    输入与输出 Linux系统将每个对象当作文件处理,这包括输入和输出进程.Linux用文件描述符来标识每个文件对象.文件描述符是一个非负整数,可以唯一标识会话中打开的文件.每个进程一次多可以有九个文件描 ...