【Canvas技法】绘制正三角形、切角正三角形、圆角正三角形

【图例】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>绘制正三角形、切角正三角形、圆角正三角形</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.</canvas><img id="myImg" src="125.png" style="display:none;"/></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=512;
const HEIGHT=512;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas');  canvas.width=WIDTH;canvas.height=HEIGHT;// 初始化canvas的绘图环境ctx=canvas.getContext('2d');  ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央// 准备stage=new Stage();    stage.init();// 开幕animate();
}// 播放动画
function animate(){    stage.update();    stage.paintBg(ctx);stage.paintFg(ctx);     // 循环if(true){window.requestAnimationFrame(animate);   }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){}// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏        // 正三角形var arr=createRegTriArr(0,-128,80);ctx.beginPath();for(var i=0;i<arr.length;i++){ctx.lineTo(arr[i].x,arr[i].y);}ctx.closePath();ctx.fillStyle="RGB(215,204,182)";ctx.fill();ctx.lineWidth=2;ctx.strokeStyle="RGB(104,20,20)";ctx.stroke();// 切角三角形var arr=createRegTriArr(-128,128,80);drawChamferedTriangle(ctx,arr[0],arr[1],arr[2],12);ctx.fillStyle="RGB(215,204,182)";ctx.fill();ctx.lineWidth=2;ctx.strokeStyle="RGB(104,20,20)";ctx.stroke();// 圆角三角形drawRoundTriangle(ctx,128,128,80,10);ctx.fillStyle="RGB(215,204,182)";ctx.fill();ctx.lineWidth=2;ctx.strokeStyle="RGB(104,20,20)";ctx.stroke();// 版权ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "8px consolas";ctx.fillStyle="black";ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){}
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:创建一个以x,y为中心,r为半径的正三角形数组
ctx:绘图上下文
x:三角形中心横坐标
y:三角形中心纵坐标
r:三角形中心到顶点的长度
arr[0]为右下,arr[1]为左下,arr[2]为正上。
----------------------------------------------------------*/
function createRegTriArr(x,y,r){var arr=new Array();for(var i=0;i<3;i++){var theta=Math.PI*2/3*i+Math.PI/6;var pt=createPt(r*Math.cos(theta)+x,r*Math.sin(theta)+y);arr.push(pt);}return arr;
}/*----------------------------------------------------------
函数:用于绘制切角正三角形
ctx:绘图上下文
ptRight:右顶点
ptLeft:左顶点
ptTop:上顶点
chamferLength:切角长度
----------------------------------------------------------*/
function drawChamferedTriangle(ctx,ptRight,ptLeft,ptTop,chamferLength){ctx.beginPath();ctx.moveTo(ptRight.x-chamferLength,ptRight.y);ctx.lineTo(ptLeft.x+chamferLength,ptLeft.y);ctx.lineTo(ptLeft.x+chamferLength/2,ptLeft.y-chamferLength*1.732/2);ctx.lineTo(ptTop.x-chamferLength/2,ptTop.y+chamferLength*1.732/2);ctx.lineTo(ptTop.x+chamferLength/2,ptTop.y+chamferLength*1.732/2);ctx.lineTo(ptRight.x-chamferLength/2,ptRight.y-chamferLength*1.732/2);ctx.closePath();
}/*----------------------------------------------------------
函数:用于绘制圆角正三角形
ctx:绘图上下文
x:三角形中心横坐标
y:三角形中心纵坐标
r:三角形中心到顶点的长度
filletRadius:圆角半径
----------------------------------------------------------*/
function drawRoundTriangle(ctx,x,y,r,filletRadius){var arr=createRegTriArr(x,y,r);var arrLeft=createRegTriArr(arr[0].x,arr[0].y,filletRadius);var arrRight=createRegTriArr(arr[1].x,arr[1].y,filletRadius);var arrTop=createRegTriArr(arr[2].x,arr[2].y,filletRadius);ctx.beginPath();ctx.moveTo(arrTop[0].x,arrTop[0].y);ctx.lineTo(arrLeft[2].x,arrLeft[2].y);ctx.arcTo(arrLeft[0].x,arrLeft[0].y,arrLeft[1].x,arrLeft[1].y,filletRadius);ctx.lineTo(arrRight[0].x,arrRight[0].y);ctx.arcTo(arrRight[1].x,arrRight[1].y,arrRight[2].x,arrRight[2].y,filletRadius);ctx.lineTo(arrTop[1].x,arrTop[1].y);ctx.arcTo(arrTop[2].x,arrTop[2].y,arrTop[0].x,arrTop[0].y,filletRadius);ctx.closePath();
}/*--------------------------------------------------
闻君有白玉美人,妙手雕成,极尽妍态,不胜心向往之。
今夜子时,当踏月来取。
君素雅达,必不致令我徒劳往返也。
---------------------------------------------------*/
//-->
</script>

END

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817414.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自己操作逆向案例一——某竞赛网登录密码加密,超级简单,泪目了!

网址&#xff1a;aHR0cHM6Ly9leGFtem9uZS5zYWlrci5jb20vcXVlc3Rpb24vZXhwbG9yZQ 打开开发者工具&#xff0c;点击账号密码登录&#xff0c;进行抓包 先进行搜索&#xff0c;发现一下子就找到了&#xff0c;且看上去很像MD5加密&#xff0c;打上断点&#xff0c;再次点击登录。…

华南理工大学程序设计竞赛 - A-KNN算法 (二分)

二分距离 期末考试在即&#xff0c;紧张预习数据挖掘的 Capps 对如下问题十分感兴趣&#xff1a; 在一维空间中有点集 S S S 包含 n n n 个点&#xff0c;用什么算法能快速回答如下 q q q 次查询&#xff1a; 第 i i i 次查询给出点 p i p_i pi​ 和整数 k i k_i ki​​…

linux 自定义命令/别名

参考资料 Linux(Ubuntu)自定义命令的使用Linux/Ubuntu系统自定义Shell命令Ubuntu/Linux 操作系统 自定义命令 目录 一. 为路径取别名二. 修改.profile文件2.1 .profile简介2.2 需求2.3 修改.profile文件 三. 创建软链接 一. 为路径取别名 ⏹需求&#xff1a;有一个work文件夹…

前端面试问题汇总 - JS篇

1. JS的数据类型&#xff0c;如何判断js的数据类型&#xff1f; 数据类型有&#xff1a;Number&#xff0c;String&#xff0c;Boolean&#xff0c;Undefined&#xff0c;Null&#xff0c;Object&#xff0c;Array 其中&#xff0c;Number&#xff0c;String&#xff0c;Boolea…

NVM的安装与配置

目录 一、简介二、下载2.1、windows环境下载地址2.2、安装 三、配置3.1、查看可安装版本3.2、安装版本3.3、使用和切换版本3.4、模块配置 四、其他4.1、全局安装pnpm4.2、常用nvm命令 一、简介 NVM&#xff0c;全称为Node Version Manager&#xff0c;是一个流行的命令行工具&a…

VScode中C++里CompileDebug(winlinux)

C在vscode中配置 1.编译器环境搭建&#xff0c;c_cpp_properties.json生成 前置&#xff0c;mingw64添加入系统环境变量&#xff0c;编辑快捷键&#xff1a;ctrlshiftp修改选项&#xff1a;编译器路径 C:/mingw64/bin/g.exe IntelliSense 模式&#xff0c;这个应该是再说明一…

ucore 实验物理内存管理篇

实验汲取知识 基于段页式内存地址的转换机制页表的建立和使用方法物理内存的管理方法 首先了解如何发现系统中的物理内存&#xff1b;然后了解如何建立对物理内存的初步管理&#xff0c;即了解连续物理内存管理&#xff1b;最后了解页表相关的操作&#xff0c;即如何建立页表…

算法--目录

algorithm: 十种排序算法 二分法-各种应用 algorithm: 拓扑排序 算法中的背包问题 最长子序列问题 前缀和-解题集合 差分数组-解题

第41篇:有限状态机<四>

Q&#xff1a;本期我们介绍有限状态机的应用之二&#xff1a;米里状态机“1101”序列检测器。 A&#xff1a;摩尔状态机1101序列检测器有5个状态&#xff0c;而米里状态机只有4个状态。当状态为s_3且输入为1时&#xff0c;状态机输出1。这里输出与输入一起被标志在状态转移箭头…

vue3 动态class和style

1、需求&#xff1a;一个删除的弹窗&#xff0c;点击会提示“是否需要删除XXXXX&#xff08;name&#xff09;”&#xff0c;但是name不固定&#xff0c;所以删除弹窗的width不能写死。&#xff08;如果不设置width&#xff0c;本项目的弹窗会自适应变得特别长&#xff09;

mybatis自制插件+注解实现数据脱敏

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 mybatis自制插件注解实现数据脱敏 前言数据脱敏的实现方式构思从哪个地方进行脱敏&#xff1f;它怎么知道我什么数据需要脱敏 项目实现拦截器实现注解实现枚举实现效果图展示 前言 在数字时代&#x…

Java哈希查找(含面试大厂题和源码)

哈希查找&#xff08;Hash Search&#xff09;是一种基于哈希表&#xff08;Hash Table&#xff09;的数据查找方法。哈希表通过使用哈希函数将键&#xff08;Key&#xff09;映射到表中的位置来存储数据&#xff0c;从而实现快速的数据访问。哈希查找的效率通常取决于哈希函数…

hive了解系列一

“ 随着智能手机的普及&#xff0c;互联网时代红利的爆发&#xff0c;用户数量和产生的数据也越发庞大。为了解决这个问题&#xff0c;提高数据的使用价值。 Hadoop生态系统就被广泛得到应用。 在早期&#xff0c;Hadoop生态系统就是为处理如此大数据集而产生的一个合乎成本效益…

力扣第20题有效的括号

typedef char STDataType; //动态栈 #define allocator_may_return_null 1typedef struct ST {STDataType* _a;int _top;//栈顶元素int _capacity;//最大容量 }Stack; //初始化栈 void StackInit(Stack *pst);//入栈 void StackPush(Stack* pst, STDataType x);//出栈 void Sta…

英语写作中“大量的”“重大的”“显著的”substantial、considerable、significant的用法

一般“大量的”“重大的”会用a great number of 、a great amount of 、a plenty of 、great等&#xff0c;这些表达都过于trivial &#xff0c;用好substantial、considerable、significant 会对写作增色不少。 一、对于可数事物&#xff0c;用a considerable/substantial n…

小程序变更主体需要多久?

小程序迁移变更主体有什么作用&#xff1f;小程序迁移变更主体的好处有很多哦&#xff01;比如可以获得更多权限功能、公司变更或注销时可以保证账号的正常使用、收购账号后可以改变归属权或使用权等等。小程序迁移变更主体的条件有哪些&#xff1f;1、新主体必须是企业主体&am…

每日OJ题_BFS解决最短路①_力扣1926. 迷宫中离入口最近的出口

目录 力扣1926. 迷宫中离入口最近的出口 解析代码 力扣1926. 迷宫中离入口最近的出口 1926. 迷宫中离入口最近的出口 难度 中等 给你一个 m x n 的迷宫矩阵 maze &#xff08;下标从 0 开始&#xff09;&#xff0c;矩阵中有空格子&#xff08;用 . 表示&#xff09;和墙&…

Hibernate入门经典与注解式开发大全

本博文主要讲解介绍Hibernate框架&#xff0c;ORM的概念和Hibernate入门&#xff0c;相信你们看了就会使用Hibernate了! 什么是Hibernate框架&#xff1f; Hibernate是一种ORM框架&#xff0c;全称为 Object_Relative DateBase-Mapping&#xff0c;在Java对象与关系数据库之间建…

【uniapp踩坑记】使用z-paging组件,微信小程序端加载不出来问题解决

使用z-paging组件&#xff0c;h5端加载正常&#xff0c;微信小程序端显示空白 今天做分页列表&#xff0c;在插件市场找到了z-paging&#xff0c;照着示例代码写了进去&#xff0c;在h5端能正常使用&#xff0c;在小程序端一直显示空白 尝试过以下无效操作&#xff1a; 1.清除所…

Scrapy 框架基础

Scrapy框架基础Scrapy框架进阶 Scrapy 框架基础 【一】框架介绍 【1】简介 Scrapy是一个用于网络爬取的快速高级框架&#xff0c;使用Python编写他不仅可以用于数据挖掘&#xff0c;还可以用于检测和自动化测试等任务 【2】框架 官网链接https://docs.scrapy.org/en/late…