canvas基础2 -- 形状

 七巧板

七巧板本质上就是 分别由几个直线 拼成一个个图形,再将这些图形结合起来

var tangram = [{ p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" },{ p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67beef" },{ p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },{ p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f5la" },{ p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a594c0" },{ p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ecc" },{ p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" }]const canvas = document.getElementById('canvas')canvas.width = 800canvas.height = 800const context = canvas.getContext('2d')for (let i = 0; i < tangram.length; i++) {draw(tangram[i], context)}function draw(piece, cxt) {cxt.beginPath()cxt.moveTo(piece.p[0].x, piece.p[0].y)for (var i = 1; i < piece.p.length; i++) {cxt.lineTo(piece.p[i].x, piece.p[i].y)}cxt.closePath()cxt.fillStyle = piece.colorcxt.fill()cxt.strokeStyle = "black"cxt.lineWidth = 3cxt.stroke()}

图示:

箭头

    context.beginPath()context.moveTo(100, 350) context.lineTo(500, 350) context.lineTo(500, 200) context.lineTo(700, 400)context.lineTo(500, 600)context.lineTo(500, 450)context.lineTo(100, 450)context.closePath()context.lineWidth = 5  context.strokeStyle = '#058'context.stroke() 

图示:

1

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

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

相关文章

Maven下载与文件配置

文章目录 官网下载相应文件修改配置文件设置环境变量 官网下载相应文件 https://maven.apache.org/ 点击Download ,找到Files 下载好了&#xff0c;请解压&#xff0c;放在你需要存储的位置&#xff01; 修改配置文件 打开解压的文件&#xff1a; 在conf 下有一个setting…

vscode远程ssh服务器且更改服务器别名

目录 1、打开VS Code并确保已安装"Remote - SSH"扩展。如果尚未安装&#xff0c;请在扩展市场中搜索并安装它。 2、单击左下角的"Remote Explorer"图标&#xff0c;打开远程资源管理器。 3、在远程资源管理器中&#xff0c;单击右上角的齿轮图标&#x…

基于VCO的OTA稳定性分析的零交叉时差模型研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

因子分析(SPSS和Python)

一、源数据 二、SPSS因子分析 2.1.导入数据 2.2.标准化处理 由于指标的量纲不同&#xff08;单位不一致&#xff09;&#xff0c;因此&#xff0c;需要对数据进行标准化处理 2.3.因子分析 点击“确定”后&#xff0c;再回到“总方差解释”表格&#xff0c;以“旋转载荷平方和…

点向行列连边的网络流图优化成行列连边的二分图:CF1592F2

https://www.luogu.com.cn/problem/CF1592F2 做完F1&#xff0c;然后用1的结论来思考。 场上推了几个性质。首先op4的操作行列必然两两不同&#xff0c;所以op4最多 max ⁡ ( n , m ) \max(n,m) max(n,m) 次。然后手玩发现只有除 ( n , m ) (n,m) (n,m) 的三个格子都为1&am…

发稿渠道和发布新闻的步骤和技巧,收藏!

在现代社会中&#xff0c;新闻的发布和传播起着至关重要的作用。通过新闻&#xff0c;人们可以获取及时的信息&#xff0c;了解社会动态和事件发展。而对于企业和组织来说&#xff0c;通过新闻发布可以宣传品牌、推广产品&#xff0c;增加曝光度&#xff0c;吸引目标受众的关注…

安卓-APP启动优化技术方案汇总

应用有三种启动状态&#xff1a;冷启动、温启动或热启动。每种状态都会影响应用向用户显示所需的时间。在冷启动中&#xff0c;应用从头开始启动。在另外两种状态中&#xff0c;系统需要将后台运行的应用带入前台。 我们建议您始终在假定冷启动的基础上进行优化。这样做也可以…

分享一下微信付费文章功能怎么做

微信付费文章功能是一种基于微信公众号的文章付费阅读模式&#xff0c;它可以帮助公众号运营者实现文章内容的变现&#xff0c;提高文章的阅读量和收益。本文将介绍微信付费文章功能的制作流程、功能特点、使用流程和推广策略&#xff0c;帮助读者了解如何制作一个高效的微信付…

Postman历史版本下载

1. 下载对应版本的postman 历史版本下载 请把下面链接的"版本号"替换为指定的版本号&#xff0c;例如&#xff1a;8.8.0 Windows64位 ​https://dl.pstmn.io/download/version/版本号/win64​ Windows32位 https://dl.pstmn.io/download/version/版本号…

基于图像的照明(IBL)简明教程

基于图像的照明基本上将图像中的所有像素视为光源。 通常&#xff0c;从全景高动态范围 (HDR) 图像创建的环境贴图&#xff08;通常是立方体贴图&#xff09;将用作纹理获取的源。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 假设阴影物体是不透明的&#xff0c;我们…

JVM(一)

字节码文件的组成: 基础信息:魔数&#xff0c;字节码文件对应的java版本号&#xff0c;访问表示public final以及父类和接口 常量池:保存了字符串常量&#xff0c;类或者是接口名&#xff0c;字段名&#xff0c;主要在接口中使用 字段:当前类或者是接口声明的字段信息 方法:当…

Spring之IoC

Spring的设计理念和整体架构 一句话概括就是&#xff1a;Spring是一个轻量级的、非侵入式的控制反转(IOC)和面向切面(AOP)的框架。 设计理念&#xff1a; 松散耦合&#xff1a; Spring鼓励开发者编写松散耦合的代码&#xff0c;通过依赖注入和接口抽象等方式来减少组件之间的…

DV SSL证书

随着网站越来越多&#xff0c;数据安全显得尤为重要。保护网站安全的数字证书应运而生&#xff0c;各大品牌的SSL证书可以实现网站http到https的转变&#xff0c;加密传输过程&#xff0c;提升品牌形象&#xff0c;优化SEO等优点。SSL证书按照验证等级分为DV&#xff0c;OV&…

意大利航天飞行器公司【Sidereus】完成510万欧元融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;位于意大利萨莱诺的航天飞行器公司Sidereus Space Dynamics今日宣布已完成510万欧元融资。 本轮融资由Primo Space和CDP Venture Capital Sgr领投&#xff0c;通过Italia Venture II - Fondo Impr…

win10 wsl安装步骤

参考&#xff1a; 安装 WSL | Microsoft Learn 一、安装wsl 1.若要查看可通过在线商店下载的可用 Linux 发行版列表&#xff0c;请输入&#xff1a; wsl --list --online 或 wsl -l -o> wsl -l -o 以下是可安装的有效分发的列表。 使用 wsl.exe --install <Distro>…

python结合excel数据轻松实现接口自动化测试

在刚刚进入测试行业的时候&#xff0c;最开始也是做功能测试&#xff0c;我想很多伙伴和我一样&#xff0c;觉得自动化测试都很高端&#xff0c;很神秘。迫不及待的想去学习作自动化测试。 以前比较常用数据库python做自动化&#xff0c;后面发现excel个人觉得更加适合&#x…

Vue开发中Jwt的使用

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这个专栏…

缓存的力量:提升API性能和可扩展性

缓存是将频繁访问的数据或资源存储在临时存储位置(例如内存或磁盘)的过程&#xff0c;以提高检索速度并减少重复处理的需要。 缓存的好处 提高性能&#xff1a;缓存消除了每次从原始源检索数据的需要&#xff0c;从而提高了响应时间并减少了延迟。减少服务器负载&#xff1a;通…

OrcaTerm AI

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

MySQL(存储过程,store procedure)——存储过程的前世今生 MySQL存储过程体验 MybatisPlus中使用存储过程

前言 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系型数据库的标准化语言&#xff0c;它用于定义、操作和管理数据库中的数据。SQL是一种通用的语言&#xff0c;可以用于多种关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;如MySQ…