JavaScript canvas绘制圆弧与圆形


Posted in Javascript onFebruary 18, 2020

本文实例为大家分享了canvas绘制圆弧与圆形的具体代码,供大家参考,具体内容如下

canvas 绘制圆弧

绘制圆弧使用 context.arc( ) 函数,包含六个参数。

context.arc(
 centerx,centery,radius,
 startingAngle,endingAngle,
 anticlockwise = false
)

分别代表:圆心 x 值,圆心 y 值,半径,开始的弧度值,结束的弧度值,(是否逆时针)。

例如:

window: onload = function(){
 var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");
 canvas.width = 800;
 canvas.height = 800;

 context.lineWidth = 5;
 context.strokeStyle = "#005588";
 context.arc(300, 300, 200, 0, 1.5*Math.PI)
 context.stroke();
}

当需要绘制多条圆弧时,还是需要调用 context.beginPath( ) 和 context.closePath( ) 。但是当使用 context.closePath( ) 时,会自动将图形封闭,因此如果需要绘制不封闭圆弧,可以省略 context.closePath( )。

绘制实心圆

跟之前的多边形一样,使用 context.fill( ) ,代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script>
  window: onload = function(){
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   canvas.width = 800;
   canvas.height = 800;

   context.lineWidth = 5;
   context.strokeStyle = "#005588";
   context.arc(300, 300, 200, 0, 1.5*Math.PI)
   context.stroke();
   context.fillStyle = "red";
   context.fill();
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
javascript中的with语句学习笔记及用法
Feb 17 #Javascript
JS实现百度搜索框关键字推荐
Feb 17 #Javascript
js实现百度淘宝搜索功能
Feb 17 #Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 #Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 #Javascript
Vue 中使用 typescript的方法详解
Feb 17 #Javascript
vue框架中props的typescript用法详解
Feb 17 #Javascript
You might like
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python实现学员管理系统
2019/02/26 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python匿名函数的使用方法解析
2019/10/10 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python程序慢的重要原因
2020/09/04 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
电大毕业个人生自我鉴定
2014/03/26 职场文书
中国入世承诺
2014/04/01 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
商场广播稿范文
2015/08/19 职场文书
外出培训学习心得体会
2016/01/18 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电