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
相关文章:
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 }], col…...
TCP/IP(五)TCP的连接管理(二)三次握手细节
一 ISN序列号探究 本文主要探究三次握手建立TCP连接的细节备注: 某些问题探究的比较深入,当前用不到,暂时通过链接引入进来吃水不忘挖井人: 小林 coding ① 初始序列号 ISN 是如何随机产生的 ISN: 初始化序列号 Initial Sequence Number 接收方和…...
Vue Elememt 链接后端
get: //async 标记为异步请求 // get 直接获取路径并 axios.get(api/user/selectUserAll,{ params:{ "tiaoshu":this.tiaoshu, "pageSize":this.currentPage, } }) .then((res…...
XPS光电子谱峰与俄歇电子谱峰-科学指南针
在做 X 射线光电子能谱(XPS)测试时,科学指南针检测平台工作人员在与很多同学沟通中了解到,好多同学仅仅是通过文献或者师兄师姐的推荐对XPS有了解,但是对于其原理还属于小白阶段,针对此,科学指南针检测平台团队组织相关…...
STM32F4X I2C LM75
STM32F4X I2C LM75 I2C协议讲解I2C接线I2C协议波形I2C起始信号I2C停止信号I2C应答信号I2C寻址I2C地址格式 I2C数据传输 LM75ALM75A介绍LM75A引脚说明LM75A地址LM75A寄存器LM75A I2C协议写配置寄存器读配置寄存器写Tos和Thyst寄存器读Tos Thyst Temp寄存器LM75A温度计算 LM75A例…...
“华为杯”研究生数学建模竞赛2019年-【华为杯】F题:智能飞行器航迹规划模型(下)(附优秀论文及Pyhton代码实现)
目录 7.3 模型评估 7.3.1 算法的有效性和复杂度 7.3.2 灵敏度分析 8.模型的评价 8.1 模型的优点...
信息系统项目管理师第四版学习笔记——配置与变更管理
配置管理 管理基础 配置管理是为了系统地控制配置变更,在信息系统项目的整个生命周期中维持配置的完整性和可跟踪性,而标识信息系统建设在不同时间点上配置的学科。 配置项的版本号规则与配置项的状态定义相关。例如:①处于“草稿”状态的…...
代理IP端口是什么意思呢?
今天,咱们来聊聊一个小众但很有料的话题——代理IP端口,它可是你纵横互联网世界的好搭子哦! 首先,我们得先弄明白,代理IP端口是个啥? 代理IP端口就像是通往网络世界的门票,是你和代理服务器之间的桥梁。…...
如何使用ChatPPT生成PPT文档
简介 ChatPPT是一个基于人工智能的PPT生成工具,可以帮助用户快速生成高质量的PPT文档。ChatPPT使用自然语言处理技术,可以根据用户的指令生成PPT内容、设计和排版。 使用方法 ChatPPT提供了两种使用方式:在线体验版和Office插件版。 在线…...
亚马逊云科技最新分享:人、流程、工具全链路数据安全合规
数据已经是现代发明和创新之源。 企业需要人—流程—工具全链路的数据安全合规。 出品 | CSDN 云计算 端到端、全栈,是近两年我们听到云巨头亚马逊云科技提到最多的架构思路。现在,已经成为生产要素的数据,重要性被提到的非常高的高度&#x…...
Xception:使用Tensorflow从头开始实现
一、说明 近年来,卷积神经网络已成为计算机视觉领域的主要算法,开发设计它们的方法一直是相当的关注。Inception模型似乎能够用更少的参数学习更丰富的表示。它们是如何工作的,以及它们与常规卷积有何不同?本文将用tensorflow实现…...
Practical Memory Leak Detection using Guarded Value-Flow Analysis 论文阅读
本文于 2007 年投稿于 ACM-SIGPLAN 会议1。 概述 指针在代码编写过程中可能出现以下两种问题: 存在一条执行路径,指针未成功释放(内存泄漏),如下面代码中注释部分所表明的: int foo() {int *p malloc(4 …...
淘宝天猫商品历史价格API接口
获取淘宝商品历史价格接口的步骤如下: 注册淘宝开放平台:首先在淘宝开放平台上注册一个账号,并进行登录。创建应用:在淘宝开放平台上创建一个应用,并获取该应用的App Key和App Secret,用于后续的接口调用。…...
从0开始学go第七天
gin获取表单from中的数据 模拟简单登录页面: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>login</title> </head><body><form action"/login" method&q…...
【牛客面试必刷TOP101】Day7.BM31 对称的二叉树和BM32 合并二叉树
作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:牛客面试必刷TOP101 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!!&…...
U盘怎么设置为只读?U盘怎么只读加密?
当将U盘设置为只读模式时,将只能查看其中数据,无法对其中数据进行编辑、复制、删除等操作。那么,怎么将U盘设置成只读呢? U盘如何设置成只读? 有些U盘带有写保护开关,当打开时,U盘就会处于只读…...
为什么MyBatis是Java数据库持久层的明智选择
在Java应用程序的开发中,选择合适的数据库持久层框架至关重要。一个明智的选择可以帮助开发人员更好地管理数据库交互、提高性能和简化开发工作。 (一)为什么要选MyBatis JDBCHibernate / JPAMyBatis简单直接ORM轻量动态SQL关联查询开发效率…...
二叉搜索树--查询节点-力扣 700 题
例题细节讲过(二叉搜索树的基础操作-CSDN博客),下面给出递归实现 public TreeNode searchBST(TreeNode node, int val) {if(node null) {return null;}if(val < node.val) {return searchBST(node.left, val);} else if(node.val < val) {return searchBST(…...
YOLOv3 | 核心主干网络,特征图解码,多类损失函数详解
https://zhuanlan.zhihu.com/p/76802514) 文章目录 1. 核心改进1.1主干网络1.2 特征图解码1.2.1 检测框(位置,宽高)解码1.2.2 检测置信度解码1.2.3 类别解码 1.3 训练损失函数1.3.1 正负样本定义1.3.2 损失函数 1. 核心改进 1.1主干网络 更…...
Java架构师API设计
目录 1 导学2 架构师的角度来审视API2.1 API狭隘理解2.2 API广义理解2.3 API的用途不同定义2.4 面向抽象编程的Java开发2.5 API在提高系统的可维护性和可扩展性方面的作用3 架构师必备的API设计原则3.1 标准化原则3.2 易用性原则3.3 扩展性原则3.4 兼容性原则3.5 抽象性原则3.6…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
