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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
js实现移动端轮播图
Dec 21 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
global.php
2006/12/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
关于php fread()使用技巧
2010/01/22 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
vue移动端屏幕适配详解
2019/04/30 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
解决Python传递中文参数的问题
2015/08/04 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
法律专业推荐信范文
2013/11/29 职场文书
升旗仪式主持词
2014/03/19 职场文书
合作投资意向书
2014/04/01 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
公司开业致辞
2015/07/29 职场文书
厉行节约工作总结
2015/08/12 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python