js结合canvas画任意多边形
实现六边形
// 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画任意多边形的更多相关文章
- 4种方法生成二维码 (js 控制canvas 画出 二维码)
随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计. 二维码原理: 二维条码/二维码可以分 ...
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
- canvas画多边形
<canvas id = "myCanvas" width = '500' height = '500'> Canvas画正多边形 </canvas>< ...
- Android利用canvas画各种图形 及Paint用法 .
引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...
- Android利用canvas画各种图形
Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...
- canvas实现任意正多边形的移动(点、线、面)
前言 我在上一篇文章简单实现了在canvas中移动矩形(点线面),不清楚的小伙伴请看我这篇文章:用canvas 实现矩形的移动(点.线.面)(1). ok,废话不多说,直接进入文章主题, 上一篇文章我 ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- canvas 画六边形边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- captcha.js一个生成验证码的插件,使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
- canvas画流程图
用canvas画流程图: 需求:最后一个圆圈无直线 遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...
随机推荐
- tidb备份恢复的方式方法
tidb备份恢复的方式方法 摘要 可以单独每个数据库实例进行备份,但是这种机制实在是太慢了. 网上查资料发现可以使用 tiup br 的方式进行备份. 但是大部分文档都比较陈旧, 官网上面又比较贴心的 ...
- 人大金仓学习之二_ksh和kddm的学习
人大金仓学习之二_ksh和kddm的学习 摘要 承接上一篇文章 主要是这里总结一下ksh相关的文档. 这里学习了很多文档: https://help.kingbase.com.cn/v8/perfor ...
- 源码学习之Spring容器创建原理
1 前言 众所周知,Spring可以帮我们管理我们需要的bean.在我们需要用到这些bean的时候,可以很方便的获取到它,然后进行一系列的操作.比如,我们定义一个bean MyTestBean pub ...
- React中Props的详细使用和props的校验
props中的children属性 组件标签只用有子节点的时候,props就会有该属性; children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数) 组件: < ...
- js赋值的两种方式
第一种 let obj=[ { value:undefined } ] obj[0].value.value='zahngsan' obj[0].value.label='张三' 机智的小伙伴,可能已 ...
- elementui中自定义Select选择器样式自定义
<el-select class="my-el-select" v-model="tenantCont" placeholder="请输入机构标 ...
- Qt中qreal的坑
今天在写Qt的时候遇到了一个bug:同样一个方程在PC机上算的结果是11,但在arm-Linux设备上算出来的结果是12,我自己用计算器按出来的结果也是12. 该段程序是这样的: maxnumbar ...
- 玩一玩 golang 1.21 的 pgo 编译优化
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 1.下载镜像 暂时不想替换本机的 golang 版本,于是 ...
- Windows 核心编程笔记 [1] Windows 错误处理
[1] Windows 错误处理 1. 关于windows系统函数的返回值错误处理 VOID:这个函数不可能失败 BOOL:如果函数调用失败,返回值为0,即为FALSE,否则为非0值,即为TRUE H ...
- 解决Edge浏览器提示“此网站已被人举报不安全”
今天下午微软旗下的 Microsoft Edge 浏览器将百度搜索的跳转域名 (*.baidu.com/link?url=*) 封杀,百度搜索首页可以打开,但搜索任何关键词点击搜索结果都会被拦截. 当 ...