时间:2021-05-28
想看前面整理的canvas常用API的同学可以点下面:
canvas学习之API整理笔记(一)
canvas学习之API整理笔记(二)
本系列文章涉及的所有代码都将上传至:http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.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')。
实例如下图所示:
绘制三角形
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')。
实例如下图所示:
绘制(圆角)矩形
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')。
实例如下图所示:
绘制多边形
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: 配置项,提供以下一些配置
上图效果的代码如下:
上图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,多谢多谢~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
莱洛三角形,也叫“勒洛三角形”或“弧三角形”,不同的情况下有不同的叫法。它是除了圆形以外,最简单易懂的勒洛多边形
实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边)。圆是椭圆形的一种,它只有一个焦点。三角形、矩形和五边形都是多边形的一种,具有不同数量
多边形重心计算三角形重心顶点为a,b,c的三角形重心为x=(xa+xb+xc)/3,y=(ya+yb+yc)/3多边形重心x=(x1w1+x2w2+…+xnwn
以等腰三角形为例,其ps旋转复制的方法是: 1、首先新建画布,用多边形工具绘制一个等腰三角形。 2、然后我们按住(ctrl加J)快捷键复制该图形。 3、选
有人问我,怎么判断一个点是不是在多边形内,本来想着把这个多边形分成一个又一个三角形,如图,然后判断这个点是不是在某个三角形中,如果在,那就肯定在这个多边形中,那