实现六边形

// html
<canvas></canvas> // js
const canvas = document.querySelector("canvas");
canvas.width = 400;
canvas.height = 200; const ctx = canvas.getContext("2d");
const cx = 200;
const cy = 100;
const radius = 50;
ctx.translate(cx, cy); for (let i = 0; i < 6; i++) {
const rotation = (Math.PI / 3) * i;
if (i === 0) {
ctx.moveTo(radius * Math.cos(rotation), radius * Math.sin(rotation));
} else {
ctx.lineTo(radius * Math.cos(rotation), radius * Math.sin(rotation));
}
}
ctx.closePath();
ctx.stroke();

封装

function drawShape(x, y, r, sides) {
ctx.translate(x, y); for (let i = 0; i < sides; i++) {
const rotation = ((Math.PI * 2) / sides) * i;
if (i === 0) {
ctx.moveTo(r * Math.cos(rotation), r * Math.sin(rotation));
} else {
// for the rest draw a line
ctx.lineTo(r * Math.cos(rotation), r * Math.sin(rotation));
}
}
ctx.closePath();
ctx.stroke();
ctx.resetTransform();
}
绘制

绘制

drawShape(100, 100, 50, 3);
drawShape(225, 100, 50, 7);
drawShape(350, 100, 50, 4);

js结合canvas画任意多边形的更多相关文章

  1. 4种方法生成二维码 (js 控制canvas 画出 二维码)

    随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计.  二维码原理: 二维条码/二维码可以分 ...

  2. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  3. canvas画多边形

    <canvas id = "myCanvas" width = '500' height = '500'> Canvas画正多边形 </canvas>< ...

  4. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  5. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  6. canvas实现任意正多边形的移动(点、线、面)

    前言 我在上一篇文章简单实现了在canvas中移动矩形(点线面),不清楚的小伙伴请看我这篇文章:用canvas 实现矩形的移动(点.线.面)(1). ok,废话不多说,直接进入文章主题, 上一篇文章我 ...

  7. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  8. canvas 画六边形边框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  10. canvas画流程图

    用canvas画流程图: 需求:最后一个圆圈无直线 遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...

随机推荐

  1. [转帖]k8s对接ceph,ceph-csi方式

    1.上传ceph-csi-yaml和ceph-csi-image 两个文件夹到服务器 2.加载 ceph-csi-image里面的镜像 3.将加载好的镜像上传到本地harbor上. 4.修改ceph- ...

  2. [转帖]Kafka关键参数设置

    https://www.cnblogs.com/wwcom123/p/11181680.html 生产环境中使用Kafka,参数调优非常重要,而Kafka参数众多,我们的java的Configurat ...

  3. Python学习之五_字符串处理生成查询SQL

    Python学习之五_字符串处理生成查询SQL 前言 昨天想给同事讲解一下获取查询部分表核心列信息的SQL方法 也写好了一个简单文档. 但是感觉不是很优雅. 最近两三天晚上一直在学习Python. 想 ...

  4. [转帖]linux 系统级性能分析工具 perf 的介绍与使用

    目录 1. 背景知识 1.1 tracepoints 1.2 硬件特性之cache 2. 主要关注点 3. perf的使用 3.0 perf引入的overhead 3.1 perf list 3.2 ...

  5. Linux用户以及ssh安全相关设置

    Linux用户相关操作 摘要 最近重保, 需要进行网络安全防护. 部分同事处理过程总是顺序有一些不太对的情况. 同时发现自对Linux用户设置也存在很多不清不楚的地方 所以趁着周末学习和总结一下. 用 ...

  6. Oracle 建立数据库dblink 然后同步部分表内容的总结

    同步处理部分数据 背景 最近在项目上发现两个分库进行数据同步时部分内容同步存在问题. 最简单的方法是导表,但是害怕有其他关联信息异常, 所以同事想到了dblink的方式. 这里简单整理一下 同事用到的 ...

  7. React类组件中事件绑定this指向的三种方式

    有状态组件和无状态组件 函数组件又叫做无状态组件,类组件又叫做有状态组件. 状态又叫做数据 函数组件没有自己的状态,只负责静态页面的展示. 我们可以理解为纯ui展示.() 类组件有自己的状态,扶着更新 ...

  8. 【发现一个问题】使用 fastcgo 导致额外的 `runtime._System` 调用的消耗

    作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 为了避免 cgo 调用浪费太多资源,因此使用了 fastc ...

  9. 安装Docker填坑

    从官网下载适合win10使用的docker,但是下载后,出现了各种坑,记录一下解决方式 1.docker想要正常启动,需要做以下的准备,开启 Windows 虚拟化和 Linux 子系统(WSL2), ...

  10. 设计模式学习-使用go实现状态模式

    状态模式 定义 优点 缺点 适用范围 代码实现 参考 状态模式 定义 状态模式(state):当一个条件的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对 ...