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 相关文章推荐
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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 Static关键字实用方法
2010/06/04 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
繁简字转换功能
2006/07/19 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
数据库基础的一些面试题
2012/02/25 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
机械设计及其自动化专业推荐信
2013/10/31 职场文书
网络程序员自荐信
2014/01/25 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
电气工程自动化求职信
2014/03/14 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
预备党员考察意见范文
2015/06/01 职场文书