canvas快速绘制圆形、三角形、矩形、多边形方法介绍


Posted in Javascript onDecember 29, 2016

想看前面整理的canvas常用API的同学可以点下面:

本系列文章涉及的所有代码都将上传至:http://wd.3water.com:81//201612/yuanma/About-Canvas-master_3water.rar

从本篇文章开始,我会分享给大家canvas绘制的各种基础图形和酷炫的图形,注意:是一系列!欢迎关注!

后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路。

本文看点:使用canvas来绘制常见的各种图形实例,并且会简单封装一下绘制各图形的方法,最后会分享给大家一个封装好的快速绘制多边形的方法。

开始之前

//获取canvas容器
var can = document.getElementById('canvas');
//创建一个画布
var ctx = can.getContext('2d');

绘制圆形

var draw = function(x, y, r, start, end, color, type) {
 var unit = Math.PI / 180;
 ctx.beginPath();
 ctx.arc(x, y, r, start * unit, end * unit);
 ctx[type + 'Style'] = color;
 ctx.closePath();
 ctx[type]();
}

参数解释:x,y-圆心;start-起始角度;end-结束角度;color-绘制颜色;type-绘制类型('fill'和'stroke')。

实例如下图所示:

canvas快速绘制圆形、三角形、矩形、多边形方法介绍

绘制三角形

var draw = function(x1, y1, x2, y2, x3, y3, color, type) {
 ctx.beginPath();
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.lineTo(x3, y3);
 ctx[type + 'Style'] = color;
 ctx.closePath();
 ctx[type]();
}

参数解释:x1(2、3),y1(2、3)-三角形的三个点的坐标;color-绘制颜色;type-绘制类型('fill'和'stroke')。

实例如下图所示:

canvas快速绘制圆形、三角形、矩形、多边形方法介绍

绘制(圆角)矩形

var draw = function(x, y, width, height, radius, color, type){
 ctx.beginPath();
 ctx.moveTo(x, y+radius);
 ctx.lineTo(x, y+height-radius);
 ctx.quadraticCurveTo(x, y+height, x+radius, y+height);
 ctx.lineTo(x+width-radius, y+height);
 ctx.quadraticCurveTo(x+width, y+height, x+width, y+height-radius);
 ctx.lineTo(x+width, y+radius);
 ctx.quadraticCurveTo(x+width, y, x+width-radius, y);
 ctx.lineTo(x+radius, y);
 ctx.quadraticCurveTo(x, y, x, y+radius);
 ctx[type + 'Style'] = color || params.color;
 ctx.closePath();
 ctx[type]();
}

参数解释:x,y-左上角点的坐标;width、height-宽高;radius-圆角;color-绘制颜色;type-绘制类型('fill'和'stroke')。

实例如下图所示:

canvas快速绘制圆形、三角形、矩形、多边形方法介绍

绘制多边形

var drawPolygon = function(ctx, conf){
 var x = conf && conf.x || 0; //中心点x坐标
 var y = conf && conf.y || 0; //中心点y坐标
 var num = conf && conf.num || 3; //图形边的个数
 var r = conf && conf.r || 100; //图形的半径
 var width = conf && conf.width || 5;
 var strokeStyle = conf && conf.strokeStyle;
 var fillStyle = conf && conf.fillStyle;
 //开始路径
 ctx.beginPath();
 var startX = x + r * Math.cos(2*Math.PI*0/num);
 var startY = y + r * Math.sin(2*Math.PI*0/num);
 ctx.moveTo(startX, startY);
 for(var i = 1; i <= num; i++) {
 var newX = x + r * Math.cos(2*Math.PI*i/num);
 var newY = y + r * Math.sin(2*Math.PI*i/num);
 ctx.lineTo(newX, newY);
 }
 ctx.closePath();
 //路径闭合
 if(strokeStyle) {
 ctx.strokeStyle = strokeStyle;
 ctx.lineWidth = width;
 ctx.lineJoin = 'round';
 ctx.stroke();
 }
 if(fillStyle) {
 ctx.fillStyle = fillStyle;
 ctx.fill();
 }
}

参数说明:

ctx: canvas画布

conf: 配置项,提供以下一些配置

  • x: 中心点横坐标
  • y: 中心点纵坐标
  • num: 多边形的边数
  • r:多边形的半径长度
  • width:多边形线的宽度
  • strokeStyle:边线的颜色
  • fillStyle:填充的颜色

canvas快速绘制圆形、三角形、矩形、多边形方法介绍

上图效果的代码如下:

上图1的代码:

drawPolygon(ctx, {
 num: 6,
 r: 100,
 strokeStyle: 'blue',
 fillStyle: '#9da'
})

上图2的代码:

drawPolygon(ctx, {
 num: 4,
 r: 150,
 strokeStyle: 'red',
 width: 4
})

上图3的代码:

drawPolygon(ctx, {
 x: 800,
 y: 250,
 num: 10,
 fillStyle: '#000'
})

结语

我们总结一下,使用canvas绘制图形就是那几个函数:beginPath、arc、moveTo、lineTo、closePath、fill、stroke。当我们能够熟练掌握并运用自如的时候,就能够独当一面了。加油吧,骚年们!

本文涉及的代码我已经上传至github,项目代码github地址,喜欢的同学点个Star,多谢多谢~

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
Vuex简单入门
Apr 19 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 #Javascript
javascript显示系统当前时间代码
Dec 29 #Javascript
解析JavaScript模仿块级作用域
Dec 29 #Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php使用curl访问https示例分享
2014/01/17 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php简单统计中文个数的方法
2016/09/30 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
angularJS 入门基础
2015/02/09 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python表格存取的方法
2018/03/07 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
P/Invoke是什么
2015/07/31 面试题
2014社区三八妇女节活动总结
2014/03/01 职场文书
十八届三中全会感言
2014/03/10 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
会计求职简历自我评价
2015/03/10 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android