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 自动增长的文本输入框实现代码
Apr 02 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
微信小程序实现多行文字滚动
Nov 18 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中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue组件与复用详解
2018/04/08 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
numpy.transpose对三维数组的转置方法
2018/04/17 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
行政部岗位职责范本
2014/03/13 职场文书
医药销售自荐书
2014/05/29 职场文书
运动会班级口号
2014/06/09 职场文书
认错检讨书
2014/10/02 职场文书
2015年试用期工作总结
2014/12/12 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL