1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>16-Canvas绘制圆弧</title>

 6     <style>

 7         *{

 8             margin: 0;

 9             padding: 0;

10         }

11         canvas{

12             display: block;

13             margin: 0 auto;

14             background: red;

15         }

16     </style>

17 </head>

18 <body>

19 <canvas width="500" height="400"></canvas>

20 <script>

21     /*

22     1.基本概念

23     角度: 一个圆360度, 一个半圆是180度

24     弧度: 一个圆2π, 一个半圆π

25

26     2.角度转换弧度公式:

27     ∵ 180角度 = π弧度

28     ∴ 1角度 = π/180;

29     ∴ 弧度 = 角度 * π/180;

30        90角度 * π/180 = π/2

31

32     3.弧度转换角度公式:

33     ∵ π弧度 = 180角度

34     ∴ 1弧度 = 180/π

35     ∴ 角度 = 弧度 * 180/π

36        π/2 * 180/π = 180/2 = 90度

37     * */

38     // 1.拿到canvas

39     let oCanvas = document.querySelector("canvas");

40     // 2.从canvas中拿到绘图工具

41     let oCtx = oCanvas.getContext("2d");

42     /*

43     x, y: 确定圆心

44     radius: 确定半径

45     startAngle: 确定开始的弧度   (0代表的是3点钟那个位置的点)

46     endAngle: 确定结束的弧度

47     Boolean: 默认是false, false就是顺时针绘制, true就是逆时针绘制

48     context.arc(x, y, radius, startAngle, endAngle, Boolean);

49     * */

50     oCtx.arc(100, 100, 100, 0, Math.PI);

51     // oCtx.arc(100, 100, 100, 0, Math.PI, true);

52     // oCtx.arc(100, 100, 100, 0, Math.PI * 2);

53     oCtx.stroke();

54 </script>

55 </body>

56 </html>

16-canvas绘制圆弧的更多相关文章

  1. canvas绘制圆弧

    canvas绘制圆弧 方法 anticlockwise为true表示逆时针,默认为顺时针 角度都传的是弧度(弧度 = (Math.PI/180)*角度) arc(x, y, radius, start ...

  2. canvas绘制圆角头像

    如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...

  3. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  4. canvas绘制形状

    栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0) ...

  5. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  6. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. wpf 后台绘制圆弧

    wpf 前台绘制圆弧很简单,如:<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness=& ...

  8. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  9. [原]Wpf应用Path路径绘制圆弧

    1. 移动指令:Move Command(M):M 起始点  或者:m 起始点比如:M 100,240或m 100,240使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没 ...

  10. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

随机推荐

  1. Jemter代理服务器录制脚本，优化后形成性能测试场景

    在进行性能测试(压力.负载)等,先要有对应的测试场景,比如添加功能:要先登录成功,然后调用添加接口,输入添加的内容,才可以添加成功.那么可以通过Jemter代理服务器,设置代理,打开测试的网站,录制脚 ...

  2. spring与设计模式之五委派模式

    一.定义 主要突出一个安排,派遣. 这个设计模式非常常见,不需要学习也能自然而然地用上. 从广义的角度出发,一个对象用另外一个对象就是委派. 二.经典实现 略. 三.spring实例代码 https: ...

  3. /etc/shadow文件破解，密码破解，md5，SHA256，SHA512破解

    环境 Kali系统 John the Ripper密码破解者 shadow文件解析 文件的格式为: {用户名}:{加密后的口令密码}:{口令最后修改时间距原点(1970-1-1)的天数}:{口令最小修 ...

  4. JS神奇的或0(|0)

    按照常识,位运算x|0,要么等于x,要么等于0 那么在JS的世界你的认知就要被颠覆了 下面请看 不带或0运算: (window.crypto.getRandomValues(new Uint32Arr ...

  5. 网络OSI七层模型及各层作用 tcp-ip

    背景 虽然说以前学习计算机网络的时候,学过了,但为了更好地学习一些物联网协议(MQTT.CoAP.LWM2M.OPC),需要重新复习一下. OSI七层模型 七层模型,亦称OSI(Open System ...

  6. 『vulnhub系列』Deathnote-1

    『vulnhub系列』Deathnote-1 下载地址: https://www.vulnhub.com/entry/deathnote-1,739/ 信息搜集: 使用nmap扫描存活主机,发现主机开 ...

  7. CF1860

    很失败啊 A 题大力分讨,罚了 \(2\) 次 B 题大力分讨,罚了 \(1\) 次 C 题大力 dp 一发过 然后就睡觉了 感觉 CF 打少了智商掉了,被前几题拖了太久

  8. Mac 完整卸载mysql

    依次执行 cd ~ sudo rm /usr/local/mysql sudo rm -rf /usr/local/mysql* sudo rm -rf /Library/StartupItems/M ...

  9. Linux-shell编程入门基础

    目录 前言 Shell编程 bash特性 shell作用域 变量 环境变量 $特殊变量 $特殊状态变量 $特殊符号(很重要) 其他内置shell命令 shell语法的子串截取 统计 指令执行时间 练习 ...

  10. 高程读后感（三）— JS对象实现继承的6种模式及其优缺点

    目录 1.原型链 1.1.默认的原型 1.2.原型和实例的关系 1.3.原型链的问题 2.借用构造函数 2.1.传递参数 2.2.借用构造函数的问题 3.组合继承 4.原型式继承 5.寄生式继承 6. ...