前言

CanvasRenderingContext2D 没有提供绘制多边形的函数,所以只能由我们自己来实现绘制多边形的函数。以六边形为基础,需要用到三角函数:sin 和 cos。

点 A 坐标

(一)连接必要的辅助线:①连接点 A 和点 O;②从点 A 往下作一条垂直线;③连接点 A1 和点 O。(二)已知的量:①AO 实际就是圆 O 的半径。点 A 坐标的求解步骤:

  1. 求 ∠AOB;
  2. 求 OB 的长;
  3. 求 AB 的长;
  4. X 轴上的坐标:O 的 X 轴 + OB 的长度;
  5. Y 轴上的坐标:O 的 Y 轴 - AB 的长度;

求 A 点的坐标就必须要知道 OB 和 AB。

求 OB 的长

领边比斜边用 COS 函数,那么 OB 的长就是:

\[cos∠AOB = \frac{OB}{AO}
\]

求 AB 的长

对边比斜边用 SIN 函数,那么 AB 的长就是:

\[sin∠AOB = \frac{AB}{AO}
\]

求 ∠AOB

求 OB 和 AB 就必须要知道 ∠AOB。观察可知,∠AOB 的度数是360° / 6 = 60°

代码实现

let circX = 100, circY = 100, // 圆心坐标
let sides = 6, angleAOB = (Math.PI * 2) / sides; // ∠AOB let sideOB = Math.cos(angleAOB) * radius, sideAB = Math.sin(angleAOB) * radius; let aX = circX + sideOB, // 点 A 的 x 坐标
let aY = circY - sideAB; // 点 A 的 y 坐标

所以最终求得点 A 的坐标:(140, 30.717967697244916)

点 F 坐标

点 F 不能直接构成一个三角形,所以度数是 0°。sin0° = 0cos0°= 1

let circX = 100, circY = 100, // 圆心坐标
let sides = 6, angle = 0; let adjacentSide = Math.cos(angle) * radius, beveledSide = Math.sin(angle) * radius; let aX = circX + adjacentSide, // 点 F 的 x 坐标
let aY = circY - beveledSide; // 点 F 的 y 坐标

所以最终求得点 F 的坐标:(180, 100)

求所有点坐标

通过上面两个坐标的求解过程可知,只有三角形的度数在增加,从点 F 顺时针开始,每一个角是自身的角度再加 60°。

let radius = 80, sides = 6, circX = 100, circY = 100;
let angle = (Math.PI * 2) / sides, accumulator = 0; for ( let i = 0; i < sides; i++ ) {
let adjacentSide = Math.cos(accumulator) * radius;
let beveledSide = Math.sin(accumulator) * radius;
let aX = circX + adjacentSide;
let aY = circY - beveledSide;
ctx.lineTo(aX, aY);
accumulator += angle;
}

6 个点坐标的结果依次是:

封装成函数

只需提供多边形有多少面、多边形的圆心半径:

function drawPolygonPath(sides, radius, circX, circY, ctx) {
let angle = (Math.PI * 2) / sides, accumulator = 0; ctx.beginPath();
for ( let i = 0; i < sides; i++ ) {
let adjacentSide = Math.cos(accumulator) * radius;
let beveledSide = Math.sin(accumulator) * radius;
let aX = circX + adjacentSide;
let aY = circY - beveledSide;
ctx.lineTo(aX, aY);
accumulator += angle;
}
ctx.closePath();
ctx.stroke();
}

ctx.lineTo(aX, aY) 确定多边形所有的点,在循环结束之后关闭路径,再调用ctx.stroke() 函数,完成多边形的绘制。

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d"); drawPolygonPath(6, 80, 100, 100, ctx);

Canvas 线性图形(五):多边形的更多相关文章

  1. Canvas 线性图形(一):路径

    路径的概念 路径是从起始点到结束点之间的连线.个人认为,二维画布中分为线性图形和非线性图形,线性图形包括矩形.直线.曲线.圆形等各种几何图形:非线性图形包括图象.文本.像素.线性图形中又分为路径和非路 ...

  2. Canvas 线性图形(三):曲线

    前言 画曲线要用到二次贝塞尔曲线或三次贝塞尔曲线.贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop. 二次贝塞尔曲线 二次贝塞尔曲线在 ...

  3. Canvas 线性图形(四):矩形

    函数 CanvasPath.rect(x, y, w, h) 参数名 类型 描述 x Number 矩形起始位置 y Number 矩形起始位置 w Number 矩形宽度 h Number 矩形高度 ...

  4. Canvas 线性图形(二):圆形

    函数 arc(x, y, radius, startAngle, endAngle, counterclockwise) 参数名 描述 x.y 圆心坐标轴 radius 圆的半径 startAngle ...

  5. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  6. canvas基础—图形变换

    1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...

  7. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  8. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  9. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. java中程序,进程和线程的区别

    2.程序,进程和线程的区别 马克-to-win:程序,进程和线程的区别是什么?这个问题比较抽象难理解,但又非常重要.我并不想给出一大堆抽象的学术解释,那样只能误国误民.所以我先给大家举一个例子.马克- ...

  2. 在ios里面返回上一级报错问题

    $("#backPrev").attr("href","javascript:void(0);").click(function(){    ...

  3. String类为什么被设计成不可变类

    1.享元模式: 1.共享元素模式,也就是说:一个系统中如果有多处用到了相同的一个元素,那么我们应该只存储一份此元素,而让所有地方都引用这一个元素. 2.Java中String就是根据享元模式设计的,而 ...

  4. ajax - xhr level2新特性 json等众多内容

    1. 今天的内容其实挺多的,我们慢慢来说.首先第一个是xhr的基本使用,什么是xhr? XMLHTTPRequest是浏览器提供的js对象,可以请求服务器上的数据资源,包括我们前面一直用的jq里面的三 ...

  5. 小天才XTC Z1S开启ADB

    起因 最近入手了Apple Watch,但因系统闭源和国区App Store第三方应用实在是少,所以就开始折腾起安卓表来了.正好家里有块给小孩子用的小天才手表,所以就想到了通过ADB调试安装一些这块表 ...

  6. JS将某个数组分割为N个对象一组(如,两两一组,三三一组等)

    方法一: var result = []; var data = [ {name:'chen',age:'25'}, {name:'chen',age:'25'}, {name:'chen',age: ...

  7. 【报错解决】Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

    项目开发日记-bug多多篇(2) 同时也是 实现一些功能(3) 真的痛苦,写一天代码遇到的bug够我写三天博客. 今天是为了做一个头像功能,具体说是用户上传头像文件并且预览的功能. <div c ...

  8. 教你轻松解决CSRF跨站请求伪造攻击

    摘要:CSRF(Cross-site request forgery)跨站请求伪造,通过伪装来自受信任用户的请求来利用受信任的网站.与XSS攻击相比,CSRF攻击往往不大流行(因此对其进行防范的资源也 ...

  9. C/C++指针、函数、结构体、共用体

    指针 变量与地址 变量给谁用的? 变量是对某一块空间的抽象命名. 变量名就是你抽象出来的某块空间的别名. 指针就是地址.指向某个地址. 指针与指针变量 指针是指向某块地址.指针(地址)是常量. 指针变 ...

  10. LintCode-165 · 合并两个排序链表-题解

    描述:将两个排序(升序)链表合并为一个新的升序排序链表样例 1:输入: list1 = null, list2 = 0->3->3->null输出: 0->3->3-&g ...