重新认识canvas,掌握必要的联结密码
查看专栏目录
canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。
文章目录
- 什么是canvas
- canvas的默认属性
- canvas的上下文
- canvas的坐标系
- canvas基本属性
- canvas基础方法
什么是canvas
canvas是 HTML5 提供的一种新标签,通常被称为画布。是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素
。通过api提供了一种绘制的能力,它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理
等方面。Canvas API 主要聚焦于2D
图形。而同样使用Canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形
。
canvas的默认属性
canvas只有两个属性width
和height
。当没有设置宽度和高度的时候,canvas 会默认宽度为 300 像素和高度为 150 像素
。
<canvas width="150" height="150" id="dajianshi"></canvas>
canvas的上下文
为了展示,首先js需要找到渲染上下文,然后在它的上面绘制。 元素有一个叫做 getContext()
的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数,即上下文的类型,参考值有2d,webgl,webgl2,bitmaprenderer等。
const canvas = document.getElementById(‘demo’);
const ctx = canvas.getContext(‘2d’);
console.log(ctx);
代码中:ctx 就可以调用很多canvas内置的方法了,这个前奏是必须要有的。
canvas的坐标系
canvas的坐标系和我们数学中常用的直角坐标系不太一样,我们通常称为窗口坐标系,窗口坐标系统与直角坐标系统都含有x轴,y轴,两轴的交点为坐标原点(0,0),原点沿x轴向右方向为正值,不同的是原点沿y轴方向向下为正值。在canvas的2D绘图环境中的坐标系统,默认情况下以canvas的左上角为坐标原点,沿x轴向右为正值,沿y轴向下为正值。
其中canvas坐标的单位都是 "px"。
然而Canvas的坐标系并不是固定的,我们可以对坐标系统进行评议放缩及旋转,我们称为坐标变换——平移、缩放、旋转
canvas基本属性
属性 | 属性 | 属性 |
---|---|---|
canvas | fillStyle | filter |
font | globalAlpha | globalCompositeOperation |
height | lineCap | lineDashOffset |
lineJoin | lineWidth | miterLimit |
shadowBlur | shadowColor | shadowOffsetX |
shadowOffsetY | strokeStyle | textAlign |
textBaseline | width |
canvas基础方法
方法 | 方法 | 方法 |
---|---|---|
arc() | arcTo() | addColorStop() |
beginPath() | bezierCurveTo() | clearRect() |
clip() | close() | closePath() |
createImageData() | createLinearGradient() | createPattern() |
createRadialGradient() | drawFocusIfNeeded() | drawImage() |
ellipse() | fill() | fillRect() |
fillText() | getImageData() | getLineDash() |
isPointInPath() | isPointInStroke() | lineTo() |
measureText() | moveTo() | putImageData() |
quadraticCurveTo() | rect() | restore() |
rotate() | save() | scale() |
setLineDash() | setTransform() | stroke() |
strokeRect() | strokeText() | transform() |
translate() |
相关文章:

重新认识canvas,掌握必要的联结密码
查看专栏目录 canvas示例教程100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…...

Linux第21步_取消鼠标中键的复制粘贴功能
在ubuntu18.04操作系统中,选中文本后,若按下鼠标中键,就可以执行复制粘贴,相当于 CtrlshiftC 后又按了 CtrlshiftV。在Linux系统中,基本上都是这么配置的。在windows系统中,我们习惯用Ctrl-C复制࿰…...

数学建模-Matlab R2022a安装步骤
软件介绍 MATLAB是一款商业数学软件,用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境,主要包括MATLAB和Simulink两大部分,可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程…...
【AI】Pytorch 系列:学习率设置
a. 有序调整:等间隔调整(Step),按需调整学习率(MultiStep),指数衰减调整(Exponential)和 余弦退火CosineAnnealing。 b. 自适应调整:自适应调整学习率 ReduceLROnPlateau。 c. 自定义调整:自定义调整学习率 LambdaLR。 #得到当前学习率 lr = next(iter(optimizer.param_gr…...
LeetCode第107题 - 二叉树的层序遍历 II
题目 解答 class Solution {List<List<Integer>> nodeLevels new LinkedList<>();public List<List<Integer>> levelOrderBottom(TreeNode root) {levelOrder(root, 0);List<List<Integer>> nodeLevels2 new LinkedList<>…...
java 常⽤的线程池模式FixedThreadPool
java 常⽤的线程池模式FixedThreadPool 线程池中的线程数量是固定的。 当提交一个新任务时,如果线程池中的线程都在运行,新任务就会被放入任务队列中等待执行。 如果线程池中的所有线程都在运行,且任务队列已满,那么线程池会创建新…...
双机调度算法
假设当前有两个处理机A、B,以及n个待处理的任务。第i个任务在处理处理机A上处理需要的时间为ai,在处理机B上处理的时间为bi,两个处理机可以并行处理任务,但单个处理机不能同时执行任务。要求给定n个任务及各个任务对应的ai 、bi&a…...

精进单元测试技能——Pytest断言的艺术
本篇文章主要是阐述Pytest在断言方面的应用。让大家能够了解和掌握Pytest针对断言设计了多种功能以适应在不同测试场景上使用。 了解断言的基础 在Pytest中,断言是通过 assert 语句来实现的。简单的断言通常用于验证预期值和实际值是否相等,例如…...

探索人工智能:深度学习、人工智能安全和人工智能
深度学习是人工智能的一种重要技术,它模拟了人类大脑神经网络的工作原理,通过建立多层次的神经元网络来实现对数据的分析和处理。这种技术的引入使得人工智能的发展进入到了一个新的阶段。 现如今,深度学习在各个领域都有着广泛的应用。例如…...

CHS_02.1.4+操作系统体系结构 二
CHS_02.1.4操作系统体系结构 二 操作系统的结构 上篇文章我们只介绍过宏内核 也就是大内核以及微内核分层结构的操作系统模块化是一种很经典的程序设计思想宏内核和微内核外核 操作系统的结构 上篇文章我们只介绍过宏内核 也就是大内核以及微内核 今年大纲又增加了分层结构 模块…...

【python可视化大屏】使用python实现可拖拽数据可视化大屏
介绍: 我在前几期分享了关于爬取weibo评论的爬虫,同时也分享了如何去进行数据可视化的操作。但是之前的可视化都是单独的,没有办法在一个界面上展示的。这样一来呢,大家在看的时候其实是很不方便的,就是没有办法一目了…...

FineBI实战项目一(4):指标分析之每日订单总额/总笔数
1 明确数据分析目标 统计每天的订单总金额及订单总笔数 2 创建用于保存数据分析结果的表 use finebi_shop_bi;create table app_order_total(id int primary key auto_increment,dt date,total_money double,total_cnt int ); 3 编写SQL语句进行数据分析 selectsubstring(c…...
如何确定CUDA对应的pytorch版本?
参考:此链接...

分布式锁3: zk实现分布式锁5 使用中间件curator
一 curator的说明 1.1 curator的说明 curator是netflix公司开源的一个zk客户端。对Zookeeper提供的原生客户端进行封装,简化了Zookeeper客户端的开发量。Curator解决了很多zookeeper客户端非常底层的细节开发工作,包括连接重连、反复注册wathcer和Node…...

扩展边界opencv
扩展图像的边缘(如上边增加50像素)通常是通过添加额外的像素行来实现的 使用cv2.copyMakeBorder函数 valueborder_color指定了边框的颜色 import cv2 import numpy as np# 读取图像 image cv2.imread(th.jpg)# 设置边框宽度 top_border_width 50 # …...

开源C语言库Melon:Cron格式解析
本文介绍开源C语言库Melon的cron格式解析。 关于 Melon 库,这是一个开源的 C 语言库,它具有:开箱即用、无第三方依赖、安装部署简单、中英文文档齐全等优势。 Github repo 简介 cron也就是我们常说的Crontab中的时间格式,格式如…...
vue的学习方法
学习Vue.js的方法如下: 先了解基本概念和语法:学习Vue.js的第一步是了解它的基本概念,例如组件、指令、数据绑定等。你可以开始阅读Vue官方文档并参考教程和示例来掌握这些基本概念和语法。 实践项目:在理解了Vue.js的基本概念和…...
Hive之set参数大全-2
C 指定是否启用表达式缓存的评估 hive.cache.expr.evaluation 是 Hive 中的一个配置属性,用于指定是否启用表达式缓存的评估。表达式缓存是一项优化技术,它可以在执行查询时缓存表达式的评估结果,以减少计算开销。 在 Hive 配置中…...

C++面试宝典第17题:找规律填数
题目 仔细观察下面的数字序列,找到规律,并填写空白处的数字。 (1)1, 2, 4, 7, 11, 16, __ (2)-1, 2, 7, 28, __, 126 (3)6, 10, 18, 32, 57, __ (4)19, 6, 1, 2, 11, __ (5)2, 3, 5, 7, 11, __ (6)1, 8, 9, 4, __, 1/6 (7)1, 2, 3, 7, 16, __, 321 (8)1, 2, …...
ubuntu查看内存使用情况
在Ubuntu中,你可以使用一些命令来查看内存使用情况。这些命令可以帮助你了解系统的内存使用情况,包括已用内存、空闲内存、缓存和缓冲区的内存等。 1、使用free命令 free命令是一个非常有用的命令,可以快速查看系统的内存使用情况。在终端中…...

(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...