绘制弧线的API:

context.arc(centerx:number, centery: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean)

参数说明:

  • centerX 圆心坐标x
  • centerY 圆心坐标y
  • radius 圆半径
  • startAngle 起始弧度
  • endAngle 结束弧度
  • anticlockwise 是否逆时针绘制,默认false,也就是顺时针绘制

对于一个圆来说,0弧度是从水平方向右侧开始的。

var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768; if (canvas.getContext('2d')) {
var context = canvas.getContext('2d');
console.log(context); // CanvasRenderingContext2D // context.arc(300, 300, 200, 0, 1.5 * Math.PI);
// context.arc(300, 300, 200, 0, 1.5 * Math.PI, true);
// context.arc(300, 300, 200, 0, 0.5 * Math.PI, true); context.lineWidth = 3;
context.strokeStyle = '#005588';
context.fillStyle = '#005577';
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI*(i+1)/10);
// context.closePath(); // 路径会被自动封闭
context.stroke();
// context.fill();
}
} else {
alert('当前浏览器不支持Canvas,请更换浏览器后再试');
}

效果:

注意:

如果加上了context.closePath() 所绘制的弧会自动封闭。

Canvas入门03-绘制弧线和圆的更多相关文章

  1. canvas详解---绘制弧线

    Draw an arc context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false); 参数一是圆 ...

  2. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  3. Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  4. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  5. Canvas入门(2):图形渐变和图像形变换

    来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...

  6. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  7. Canvas入门到高级详解(上)

    神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...

  8. canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  9. canvas学习笔记(上篇)-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

随机推荐

  1. Java并发编程实战 第10章 避免活跃性危险

    死锁 经典的死锁:哲学家进餐问题.5个哲学家 5个筷子 如果没有哲学家都占了一个筷子 互相等待筷子 陷入死锁 数据库设计系统中一般有死锁检测,通过在表示等待关系的有向图中搜索循环来实现. JVM没有死 ...

  2. CentOS6.X系统启动流程

    1.硬件启动阶段 BIOS自检  BIOS的功能由两部分组成,分别是POST码和Runtime服务.POST阶段完成后它将从存储器中被清除,而Runtime服务会被一直保留,用于目标操作系统的启动.B ...

  3. 【ZOJ3627】Treasure Hunt II

    题目大意:给定一个长度为 N 的序列,现有两个人从 P 点出发,每个单位时间每个人最多可以移动一个单位,两人之间的最大距离不能超过 M,一共有 T 单位的时间,求在合法情况下,两人可以获得的序列点权和 ...

  4. 基于注解的IOC配置

    1 明确 注解配置和XML配置要实现的功能都是一样的,都是要降低程序间的耦合.只是配置的形式不一样. 关于实际的开发中到底是使用XML还是注解,每家公司有着不同的习惯.具体问题具体分析. 2 环境搭建 ...

  5. HDU-6668-Polynomial(数学)

    链接: https://vjudge.net/problem/HDU-6668 题意: 度度熊最近学习了多项式和极限的概念. 现在他有两个多项式 f(x) 和 g(x),他想知道当 x 趋近无限大的时 ...

  6. redis优雅的批量删除key

    redis优雅的批量删除key 近期在处理redis的故障中,发现需要删除大量的历史数据(也是bigkeys),好在符合正则表达式.要不然就很痛苦,这也体现了在设计key的时候遵循规范带来的维护好处之 ...

  7. 使用tensorflow训练word2vec

    from http://blog.csdn.net/wangyangzhizhou/article/details/77530479?locationNum=1&fps=1 使用了tensor ...

  8. Vue的编译过程

      碰到是否有template选项时,会询问是否要对template进行编译: 在template编译(渲染成UI)有一个过程.模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据 ...

  9. linux-shell脚本基础-2

    1,用户组 添加用户 useradd -u UID -o -g 指定 GID或组名 -c 注释信息 -d 家目录 -s shell -G 附加组 -r 系统用户 -m 家目录,系统用户 -M 不创建家 ...

  10. CodeChef DGCD Dynamic GCD

    CodeChef题面 Time limit 210 ms Code length Limit //内存限制也不说一下,真是的-- 50000 B OS Linux Language limit C, ...