当前位置: 首页 > news >正文

canvas的基础使用

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版图片截取 一、画一条直线 画一条直线需要用到三个方法&#xff1a;cxt.moveTo、cxt.lineTo、cxt.stroke <canvas id&qu…...

Windows 常用网络命令之 telnet(测试端口是否连通)

文章目录 1 概述1.1 启用 telnet 2 常用命令2.1 ping&#xff1a;测试网络是否连通2.2 telnet&#xff1a;测试端口是否连通 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?

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

Epic Games 商店面向欧盟 iPhone 用户上线

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

【计算机毕设项目】2025级计算机专业小程序项目推荐 (小程序+后台管理)

以下项目选题适合计算机专业大部分专业&#xff0c;技术栈主要为&#xff1a;前端小程序&#xff0c;后端Java语言&#xff0c;数据库MySQL 后台免费获取源码&#xff0c;可提供远程调试、环境安装配置服务。&#xff08;文末有联系方式&#xff09; 以下是本次部分项目推荐1…...

Fast API + LangServe快速搭建 LLM 后台

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

CSS继承、盒子模型、float浮动、定位、diaplay

一、CSS继承 1.文字相关的样式会被子元素继承。 2.布局样式相关的不会被子元素继承。&#xff08;用inherit可以强行继承&#xff09; 实现效果&#xff1a; 二、盒子模型 每个标签都有一个盒子模型&#xff0c;有内容区、内边距、边框、外边距。 从内到外&#xff1a;cont…...

使用百度文心智能体创建AI旅游助手

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

斗破C++编程入门系列之四:运算符和表达式

鸡啄米C 记住首页不迷路&#xff1a; http://www.jizhuomi.com/software/129.html 斗破观看顺序&#xff1a; https://v.haohuitao.cc/yhplay/336-1-2.html 第一季☞第二季前2集☞特别篇1☞第二季3&#xff5e;12集☞特别篇2沙之澜歌☞第三季☞第四季☞三年之约☞缘起☞年番…...

CVPR2024 | PromptAD: 仅使用正常样本进行小样本异常检测的学习提示

PromptAD: 仅使用正常样本进行小样本异常检测的学习提示 论文名称&#xff1a;PromptAD: Learning Prompts with only Normal Samples for Few-Shot Anomaly Detection 论文地址&#xff1a;https://arxiv.org/pdf/2404.05231 研究背景 异常检测&#xff08;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. 多元线性回归的基本原理&#xff08;LinearRegression&#xff09; 二、多重共线性 1. 介绍 2. 多重共线性详细解释 三、岭回归&#xff08;解决多重共线性问题&#xff09; 1. 模型推导 2. 选取最佳的正则化参数取值 四、Lasso&am…...

Go 语言切片(Slice) 15

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

嵌入式开发--STM32G030C8T6,写片上FLASH死机CFGBSY和写入出错

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

通过Fiddler抓包保存网页上的视频(包括Bilibili、B站和其他视频站)亲测可用

本文仅供学习交流用途 文中出现的信息仅为演示需要 请勿以任何方法剽窃、盗用任何视频作者的任何视频 有时候遇到一些素材想保存下来&#xff0c;但是网站不给保存&#xff0c;无论视频是否允许转载。这篇介绍一下最近发现的一个保存视频的方法。 不会介绍Fiddler了&#xf…...

企业为什么需要安装加密软件

1. 数据保护 防止数据泄露&#xff1a;加密软件通过对敏感数据进行加密处理&#xff0c;确保即使数据在传输或存储过程中被截获&#xff0c;也无法被未授权人员读取或利用&#xff0c;从而有效防止数据泄露。 完整性保护&#xff1a;加密不仅保护数据的机密性&#xff0c;还通…...

Spring Web MVC入门(下)

1. 响应 1.1 返回静态页面 创建前端页面&#xff0c;如下图所示&#xff1a; <!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进行配置 废话不多说上代码后自己百度了解配置项的意思就好 下面代码是折线图的 &#xff0c;柱状图和它一摸一样&#xff0c;只需要把line换成bar就好 <template><l-echart ref"chart"></l-echart> …...

jmreport测试数据库出现 权限不足,此功能需要分配角色 解决方法

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...