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执行顺序
Nov 09 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js 通用订单代码
Dec 23 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python正则中最短匹配实现代码
2018/01/16 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
毕业生的自我评价
2013/12/30 职场文书
房屋转让协议书
2014/04/11 职场文书
环境保护标语
2014/06/20 职场文书
丧事主持词
2015/07/02 职场文书
工程主管竞聘书
2015/09/15 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
redis 查看所有的key方式
2021/05/07 Redis