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 相关文章推荐
JS运行耗时操作的延时显示方法
Nov 19 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
详解vue2.0模拟后台json数据
May 16 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
PHP中串行化用法示例
2016/11/16 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python自动扫雷实现方法
2015/07/25 Python
深入理解Python变量与常量
2016/06/02 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
应届大学生的推荐信
2013/11/20 职场文书
金融与证券专业求职信
2014/06/22 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
湘江北去观后感
2015/06/15 职场文书
农村婚庆主持词
2015/06/29 职场文书