商丘企业做网站/西安关键词快速排名
canvas的基础使用
- 一、画一条直线
- 二、线的属性设置
- 三、防止多次绘制的样式污染
- 四、闭合
- 五、快捷绘制矩形
- 六、绘制圆形
- 七、绘制文字
- 八、绘制图片
- js版
- dom版
- 图片截取
一、画一条直线
画一条直线需要用到三个方法:cxt.moveTo、cxt.lineTo、cxt.stroke
<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas><script>const c=document.getElementById('c')const cxt = c.getContext('2d')cxt.moveTo(100,100) //定义起点cxt.lineTo(200,150) //定义途径点cxt.stroke() //把点连起来</script>
效果:
二、线的属性设置
1、线的宽度
cxt.lineWidth = 20
2、线的颜色
cxt.strokeStyle = 'pink'
3、线两端样式
cxt.lineCap = 'round' // 默认: butt; 圆形: round; 方形: square
4、拐角样式
cxt.lineJoin = 'round' // miter: 默认值,尖角;round: 圆角;bevel: 斜角
5、虚线样式
cxt.setLineDash([10]) // 只传1个参数,实线与空白都是 10px
cxt.setLineDash([10, 20]) // 2个参数,此时,实线是 10px, 空白 20px
cxt.setLineDash([10, 20, 5]) // 传3个以上的参数,此例:10px实线,20px空白,5px实线,10px空白,20px实线,5px空白 ……
三、防止多次绘制的样式污染
使用cxt.beginPath()
重新开启一个路径
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.moveTo(100,100)cxt.lineTo(200,100)cxt.lineWidth = 20cxt.strokeStyle = 'pink'cxt.lineCap = 'round'cxt.stroke()cxt.beginPath() // 重新开启一个路径cxt.moveTo(20, 120.5)cxt.lineTo(200, 120.5)cxt.lineWidth = 4cxt.strokeStyle = 'red'cxt.stroke()
四、闭合
使用cxt.closePath()
方法可以对折线进行闭合
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.moveTo(50,50)cxt.lineTo(50,100)cxt.lineTo(100,100)cxt.closePath() // 闭合操作,一定要在stroke之前写cxt.lineWidth = 2cxt.strokeStyle = 'pink'cxt.lineCap = 'round'cxt.stroke()
效果:
五、快捷绘制矩形
使用strokeRect()
描边矩形
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.strokeStyle = 'pink'cxt.strokeRect(50, 50, 200, 100) // 起点X坐标、起点Y坐标、长、高
效果:
使用fillRect()
方法进行矩形填充,其实和strokeRect
方法类似,一个填充,一个属于描边
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.fillStyle = 'pink' //填充颜色cxt.fillRect(50, 50, 200, 100) // 起点X坐标、起点Y坐标、长、高
效果:
使用rect()
绘制矩形,他也是和strokeRect()
、fillRect()
类似,但是需要手动调用shroke()
或fill()
才会进行绘制
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.rect(50, 50, 200, 100)cxt.strokeStyle='red'cxt.stroke()cxt.fillStyle='green'cxt.fill()
效果:
使用clearRect()
方法清空矩形
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.fillStyle = 'pink' // 设置填充颜色cxt.fillRect(50, 50, 200, 200) // 填充矩形cxt.clearRect(60, 60, 180, 90) // 清空指定区域矩形
效果:
六、绘制圆形
绘制圆形的方法是arc()
arc(x, y, r, sAngle, eAngle,counterclockwise) // 圆心X坐标、Y坐标、半径、开始角度、结束角度、绘制方向(true:顺时针,flase:逆时针)
注意:绘制圆形之前,必须先调用 beginPath() 方法!!! 在绘制完成之后,还需要调用 closePath() 方法!!!
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.beginPath()cxt.arc(150, 150, 80, 0, 360)cxt.closePath()cxt.stroke()
效果:
七、绘制文字
使用strokeText
绘制文字描边
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.font = '60px Arial' // 将字号设置成 60px,方便观察cxt.strokeText('Hello world!', 30, 90) //可以设置第四个参数表示文本最大宽度,超过宽度文本将会被压缩
效果:
使用fillText
进行文字填充
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.font = '60px Arial' // 将字号设置成 60px,方便观察cxt.fillText('Hello world!', 30, 90)
效果:默认颜色黑色,可以通过fillStyle设置进行自定义
使用measureText()
获取文本长度
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.font = '60px Arial' // 将字号设置成 60px,方便观察let text= 'Hello world!'cxt.fillText(text, 30, 90)console.log(cxt.measureText(text).width) // 313.447265625
使用textAlign
进行文本水平对齐方式设置
start
:默认。在指定位置的横坐标开始。end
:在指定坐标的横坐标结束。left
:左对齐。right
:右对齐。center
:居中对齐。
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.font = '60px Arial' // 将字号设置成 60px,方便观察let text= 'Hello world!'cxt.textAlign ='center'cxt.fillText(text, 30, 90)
效果:
使用textBaseline
进行文本垂直对齐方式设置
alphabetic
:默认。文本基线是普通的字母基线。top
:文本基线是 em 方框的顶端。bottom
:文本基线是 em 方框的底端。middle
:文本基线是 em 方框的正中。hanging
:文本基线是悬挂基线。
const c = document.getElementById('c')const cxt = c.getContext('2d')cxt.font = '60px Arial' // 将字号设置成 60px,方便观察let text = 'Hello'cxt.textAlign = 'center'// 默认 topcxt.textBaseline = 'top'cxt.fillText(text, 200, 150)// 默认 bottomcxt.textBaseline = 'bottom'cxt.fillText(text, 320, 150)// 默认 middlecxt.textBaseline = 'middle'cxt.fillText(text, 480, 150)
效果:
八、绘制图片
在 Canvas 中可以使用 drawImage()
方法绘制图片。
渲染图片有两种方法:
1、在JS里加载图片再渲染
2、把DOM里的图片拿到 canvas 里渲染
drawImage(image, dx, dy)
image
: 要渲染的图片对象。dx
: 图片左上角的横坐标位置。dy
: 图片左上角的纵坐标位置。
js版
1、创建Image
对象
2、引入图片
3、等待图片加载完成
4、使用 drawImage()
方法渲染图片
const c = document.getElementById('c')const cxt = c.getContext('2d')// 1 创建 Image 对象const image = new Image()// 2 引入图片image.src = 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960g'// 3 等待图片加载完成image.onload = () => cxt.drawImage(image, 30, 30, 100, 100)
效果:
dom版
<canvas id="c" width="600" height="300" style="border: 1px solid #ccc;"></canvas><img src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960g" id="grilImg"/><script>const c = document.getElementById('c')const cxt = c.getContext('2d')const grilImg = document.getElementById('grilImg')window.onload=()=> cxt.drawImage(grilImg, 100, 100,100,100)</script>
效果:
图片截取
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
image
: 图片对象sx
: 开始截取的横坐标sy
: 开始截取的纵坐标sw
: 截取的宽度sh
: 截取的高度dx
: 图片左上角的横坐标位置dy
: 图片左上角的纵坐标位置dw
: 图片宽度dh
: 图片高度
image.onload = () => cxt.drawImage(image, 30, 30, 100, 100, 30, 30, 200, 200)
效果:
相关文章:

canvas的基础使用
canvas的基础使用 一、画一条直线二、线的属性设置三、防止多次绘制的样式污染四、闭合五、快捷绘制矩形六、绘制圆形七、绘制文字八、绘制图片js版dom版图片截取 一、画一条直线 画一条直线需要用到三个方法:cxt.moveTo、cxt.lineTo、cxt.stroke <canvas id&qu…...

Windows 常用网络命令之 telnet(测试端口是否连通)
文章目录 1 概述1.1 启用 telnet 2 常用命令2.1 ping:测试网络是否连通2.2 telnet:测试端口是否连通 3 扩展3.1 进入 cmd 命令3.2 cls 清屏命令 1 概述 1.1 启用 telnet telnet ip:port // 格式 telnet 10.0.24.154:8001若出现上述提示&…...

x264 编码器像素运算系列:asd8函数
x264 编码器中像素间运算 在 x264 编码器中有多种像素间的运算,如下: sad 计算:SAD(Sum of Absolute Differences,绝对差值和)是一种在图像处理和视频编码中常用的度量,用于计算两个图像块之间的差异。SAD值越小,表示两个图像块越相似。hadamard_ac计算:用于计算Hadam…...

什么是AR、VR、MR、XR?
时代背景 近年来随着计算机图形学、显示技术等的发展,视觉虚拟化技术得到了广泛的发展,并且越来越普及化,慢慢的也走入人们的视野。目前市场上视觉虚拟化技术的主流分为这几种 VR、AR、MR、XR。这几项技术并不是最近才出现的,VR的…...

Epic Games 商店面向欧盟 iPhone 用户上线
Epic Games Store 终于在欧盟推出,为玩家提供了不通过 App Store 就能在 iPhone上访问游戏的途径。在经历了漫长而昂贵的关于支付和竞争对手应用程序店面的法律战,以及公证方面的麻烦之后,Epic Games 成功地为App Store 带来了一个数字店面。…...

【计算机毕设项目】2025级计算机专业小程序项目推荐 (小程序+后台管理)
以下项目选题适合计算机专业大部分专业,技术栈主要为:前端小程序,后端Java语言,数据库MySQL 后台免费获取源码,可提供远程调试、环境安装配置服务。(文末有联系方式) 以下是本次部分项目推荐1…...

Fast API + LangServe快速搭建 LLM 后台
如果快速搭建一个 LLM 后台 API,使前端可以快速接入 LLM API。LangChain 或者 LlamaIndex 架构都可以快速集成各种大语言模型,本文将讲述如何通过 Fast API LangServe 快速的搭建一个后台 Rest API 服务。LLM 这些框架现在主打一个就是快速,…...

CSS继承、盒子模型、float浮动、定位、diaplay
一、CSS继承 1.文字相关的样式会被子元素继承。 2.布局样式相关的不会被子元素继承。(用inherit可以强行继承) 实现效果: 二、盒子模型 每个标签都有一个盒子模型,有内容区、内边距、边框、外边距。 从内到外:cont…...

使用百度文心智能体创建AI旅游助手
百度文心智能体平台为你开启。百度文心智能体平台,创建属于自己的智能体应用。百度文心智能体平台是百度旗下的智能AI平台,集成了先进的自然语言处理技术和人工智能技术,可以用来创建属于自己的智能体应用,访问官网链接࿱…...

斗破C++编程入门系列之四:运算符和表达式
鸡啄米C 记住首页不迷路: http://www.jizhuomi.com/software/129.html 斗破观看顺序: https://v.haohuitao.cc/yhplay/336-1-2.html 第一季☞第二季前2集☞特别篇1☞第二季3~12集☞特别篇2沙之澜歌☞第三季☞第四季☞三年之约☞缘起☞年番…...

CVPR2024 | PromptAD: 仅使用正常样本进行小样本异常检测的学习提示
PromptAD: 仅使用正常样本进行小样本异常检测的学习提示 论文名称:PromptAD: Learning Prompts with only Normal Samples for Few-Shot Anomaly Detection 论文地址:https://arxiv.org/pdf/2404.05231 研究背景 异常检测(Anomaly Detecti…...

文件批量上传,oss使用时间戳解决同名问题 以及一些sql bug
1.文件批量上传 ApiOperation(value "文件批量上传")PostMapping("/multipleImageUpload")Transactional(rollbackFor Exception.class)public Result multipleImageUpload(ApiParam(name "files",value "文件",required true) R…...
机器学习——线性回归(sklearn)
目录 一、认识线性回归 1. 介绍 2. 多元线性回归的基本原理(LinearRegression) 二、多重共线性 1. 介绍 2. 多重共线性详细解释 三、岭回归(解决多重共线性问题) 1. 模型推导 2. 选取最佳的正则化参数取值 四、Lasso&am…...

Go 语言切片(Slice) 15
在 Go 语言中,切片(Slice)是一种可以容纳多个值的数据结构,它可以被视为一个可变的数组。切片是一个引用类型,它可以容纳任意类型的值,可以是整数、字符串、浮点数、结构体等。 切片的声明方式是使用 [] 语法,例如&am…...

嵌入式开发--STM32G030C8T6,写片上FLASH死机CFGBSY和写入出错
故障现象1 G0系列,写片上FLASH时,经常死机,而且按复位键都没用,属于不断电都救不回来的那种死法。这种情况一般是由硬件置位了某个标志导致,只有断电才能故障复原。 故障查找 检查FLASH的相关寄存器,发现…...

通过Fiddler抓包保存网页上的视频(包括Bilibili、B站和其他视频站)亲测可用
本文仅供学习交流用途 文中出现的信息仅为演示需要 请勿以任何方法剽窃、盗用任何视频作者的任何视频 有时候遇到一些素材想保存下来,但是网站不给保存,无论视频是否允许转载。这篇介绍一下最近发现的一个保存视频的方法。 不会介绍Fiddler了…...

企业为什么需要安装加密软件
1. 数据保护 防止数据泄露:加密软件通过对敏感数据进行加密处理,确保即使数据在传输或存储过程中被截获,也无法被未授权人员读取或利用,从而有效防止数据泄露。 完整性保护:加密不仅保护数据的机密性,还通…...

Spring Web MVC入门(下)
1. 响应 1.1 返回静态页面 创建前端页面,如下图所示: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Index页面</title> </head> <body>Hello,Spring MVC…...

uniapp app中使用柱状图 折线图 圆环图和饼图
实现思路 借助echarts.min.js 搭配l-echart进行配置 废话不多说上代码后自己百度了解配置项的意思就好 下面代码是折线图的 ,柱状图和它一摸一样,只需要把line换成bar就好 <template><l-echart ref"chart"></l-echart> …...

jmreport测试数据库出现 权限不足,此功能需要分配角色 解决方法
目录 前言1. 问题所示2. 原理分析3. 解决方法前言 关于jmreport的补充可看官网:jmreport上线安全配置 1. 问题所示 jmreport测试数据库出现,出现如下所示的问题:权限不足,此功能需要分配角色! 截图如下所示: 2. 原理分析 对于原理分析的Bug,代表当前用户没有足够的…...

这是啥设计模式-适配模式
有一个广告召回系统,输入用户id就可以给用户推荐相应的广告,一开始我们只有布尔检索和向量检索两种方式。 1. 面向接口编程,而非实现 第一点就是定义接口,客户端关注的是接口,对客户端来说,他只关心检索引…...

大语言模型(LLMs)Tokenizers详解
Tokenizers是大语言模型(Large Language Models,LLMs)中用于将文本分割成基本单元(tokens)的工具。这些工具不仅影响模型的输入表示,还直接影响模型的性能和效率。以下是对Tokenizers的详细解释:…...

分支-快排/归并---1
目录 1.排序数组 2.数组中的第K个最大元素 3.最小k个数 4.排序数组(归并) 5.数组中的逆序对 6.计算右侧小于当前元素的个数 7. 翻转对 1.排序数组 快排的写法有很多,这里我采取了相对快的三路划分加随机基准值。 三路划分,是…...

代码随想录训练营 Day32打卡 动态规划 part01 理论基础 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯
代码随想录训练营 Day32打卡 动态规划 part01 一、 理论基础 动态规划中每一个状态一定是由上一个状态推导出来的,这一点就区分于贪心,贪心没有状态推导,而是从局部直接选最优的。 例如:有N件物品和一个最多能背重量为W 的背包…...

【智能流体力学】剖析ANSYS Fluent材料属性设定与边界条件
目录 一、材料属性设定**1. 材料属性的概述****功能****2. 材料属性的类型****标准材料库****多相流****燃烧模型****传热模型****辐射模型****3. 属性设置与函数****4. 自定义材料数据库****5. Granta数据库支持**二、边界条件**1. 通用边界条件****Pressure Inlet (压力-入口…...

微信小程序反编译工具
目录 介绍 工程结构还原 微信开发者工具运行 如何查看当前运行版本? 开启小程序F12 重新打包运行 效果示例 安装 用法 参数说明 获取微信小程序AppID 文件夹名即为AppID 下载地址 介绍 纯Golang实现,一个用于自动化反编译微信小程序的工具,小程序安全利器, 自…...

线程基本概念
一、进程的结束 wait(阻塞) 一般不做额外的事情 wait(非阻塞) 逻辑不受影响(必须套在循环中) wait作用:1.获取子进程退出状态 2.回收资源 传参为指针:被调修改主调 获取退出状态值: WIFEXITED 判断是否…...

在SpringBoot中执行后台任务
在 Spring Boot 中执行后台任务通常涉及到使用线程池和定时任务。Spring Boot 提供了多种方式来实现后台任务,包括使用 Scheduled 注解、ThreadPoolTaskExecutor 和 ExecutorService。 下面我将详细介绍如何使用这些方法来实现后台任务。 使用 Scheduled 注解 Sp…...

【网络】UDP回显服务器和客户端的构造,以及连接流程
回显服务器(Echo Server) 最简单的客户端服务器程序,不涉及到业务流程,只是对与 API 的用法做演示 客户端发送什么样的请求,服务器就返回什么样的响应,没有任何业务逻辑,没有进行任何计算或者…...

【智能流体力学】ANSYS Fluent工作流程设置、求解和后处理详解
目录 一、设置阶段1. **模型****功能** :**详细说明及原理** :2. **材料****功能** :**详细说明及原理** :3. **单元区域条件****功能** :**详细说明及原理** :4. **边界条件****功能** :**详细说明及原理** :5. **网格交界面****功能** :**详细说明及原理** :6. **动…...