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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
js实现盒子滚动动画效果
Aug 09 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
第七章 php自定义函数实现代码
2011/12/30 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
php字符集转换
2017/01/23 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
深入理解python多进程编程
2016/06/12 Python
python单例模式实例解析
2018/08/28 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python中的itertools的使用详解
2020/01/13 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python修改列表值问题解决方案
2020/03/06 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
大四自我鉴定范文
2013/10/06 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
ant design vue的form表单取值方法
2022/06/01 Vue.js