HTML新特性【缩放图像、图像切片、平移、旋转、缩放、变形、裁切路径、时钟、运动的小球】(二)-全面详解（学习总结---从入门到深化）

目录

绘制图像_缩放图像

绘制图像_图像切片

Canvas状态的保存和恢复

图形变形_平移

图形变形_旋转

图形变形_缩放

图形变形_变形

裁切路径

动画_时钟

动画_运动的小球

引入外部SVG

绘制图像_缩放图像

ctx.drawImage(img, x, y, width, height)
        img ：图像数据，可以是 <img> 元素，也可以是 <canvas> 元素
        x ：在目标 canvas 里放置图像的左上角的横坐标
        y ：在目标 canvas 里放置图像的左上角的纵坐标
        width ：图像在画布上的宽度
        height ：图像在画布上的高度
 

       function draw(imgUrl, x, y) {// 定义imgvar img = new Image()img.src = imgUrl// 图片加载完后绘制图像img.onload = function () {// 绘制图像ctx.drawImage(img, x, y, 200, 200)}}// 通过遍历绘制九张图片铺满画布for (var i = 0; i < 3; i++) {for (var j = 0; j < 3; j++) {draw('./assets/4.jpg', i * 200, j * 200)}}

绘制图像_图像切片

 ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
        img ：图像数据，可以是 <img> 元素，也可以是 <canvas> 元素·
        sx ：图像源被切的开始位置的横坐标
        sy ：图像源被切的开始位置的纵坐标 

        sWidth ：图像源被切的宽度
        sHeight ：图像源被切的高度
        dx ：图像在画布的开始位置的横坐标
        dy ：图像在画布的开始位置的纵坐标
        dWidth ：图像在画布的宽度
        dHeight ：图像在画布的高度

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
剩余的8个参数前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

        //   定义图片var img = new Image()img.src = './assets/2.jpg'// 图片加载完成后绘制图像img.onload = function () {// 绘制图像// 从源图片(50,50)的位置开始切片，切片大小为50*50//切片在画布上的起始位置为(100,100)，切片在画布上最终画出 //来的大小为200*200ctx.drawImage(img, 50, 50, 50,50, 100, 100, 200, 200)}//绘制矩形ctx.lineWidth = 30ctx.strokeStyle = 'yellow'ctx.strokeRect(100, 100, 200, 200)

Canvas状态的保存和恢复

1、 ctx.save() ：将画布的当前状态保存起来，相当于在内存之中产生一个样式快照
一个绘画状态包括：
        1.1、当前的一些样式： strokeStyle , fillStyle , lineWidth , lineCap , lineJoin ,lineDashOffset ,         shadowOffsetX , shadowOffsetY , shadowBlur , shadowColor , 
        font , textAlign , textBaseline 等
        1.2、当前应用的变形（即移动，旋转和缩放）
       1.3、当前的裁切路径（clipping path）
2、ctx.restore() ：将画布的样式恢复到之前保存的快照

        ctx.fillRect(0, 0, 300, 300)//绘制矩形ctx.save()//保存当前状态ctx.fillStyle = 'green'//设置填充色ctx.fillRect(30, 30, 240,240)//绘制矩形ctx.save()//保存当前状态ctx.fillStyle='#fff'//设置填充色ctx.fillRect(60,60,180,180)//绘制矩形ctx.restore()//恢复上一个状态ctx.fillRect(90,90,120,120)ctx.restore()//恢复上上一个状态ctx.fillRect(120,120,60,60)

图形变形_平移

 ctx.translate(x, y)
x ：是左右偏移量， x>0 ，向右平移， x<0 ，向左平移
y ：是上下偏移量， y>0 ，向下平移， y<0 ，向上平移

     for (var i = 0; i < 2; i++) {for (var j = 0; j < 2; j++) {ctx.restore()//恢复上一次状态ctx.save()//保存上一次状态//产生平移ctx.translate(50 * i + 10, 50 * j + 10)//设置填充颜色ctx.fillStyle = ['red', 'green'][j]//绘制小矩形ctx.fillRect(0, 0, 25, 25)}}

图形变形_旋转

 ctx.rotate(angle) ：以 原点为中心 旋转 坐标系
        angle ：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

        // 平移ctx.translate(100, 100)for (var i = 1; i < 7; i++) {// 旋转坐标系ctx.rotate((Math.PI*2)/6)// 绘制圆形ctx.beginPath()ctx.fillStyle = 'red'ctx.arc(0, 30, 5, 0, Math.PI * 2)ctx.fill()}

图形变形_缩放

 ctx.scale(x,y) ：用于缩放图像。
        x ： x 轴方向的缩放因子
        y ： y 轴方向的缩放因子
默认情况下，一个单位就是一个像素，缩放因子可以缩放单位，比如缩放因子 0.5 表示将大小缩小为原来的50%，缩放因子 10 表示放大十倍。
如果缩放因子为1，就表示图像没有任何缩放。
如果为-1，则表示方向翻转。 ctx.scale(-1, 1) 为水平翻转， ctx.scale(1, -1) 表示垂直翻转。

        ctx.translate(100, 100)//平移ctx.save()//保存当前状态// 绘制第一个矩形ctx.fillStyle = 'green'ctx.fillRect(0, 20, 100, 100)//绘制X轴所在的一条直线ctx.beginPath()ctx.moveTo(0,0)ctx.lineTo(500,0)ctx.stroke()// 绘制第二个矩形ctx.scale(0.5, 0.5)//缩放网格ctx.fillStyle = 'yellow'ctx.fillRect(0, 40, 100, 100)ctx.restore()//恢复之前的状态ctx.scale(1, -1)//垂直方向翻转// 绘制第一个矩形ctx.fillStyle = 'green'ctx.fillRect(0, 20, 100, 100)// 绘制第二个矩形ctx.scale(0.5, 0.5)//缩放网格ctx.fillStyle = 'yellow'ctx.fillRect(0, 40, 100, 100)

图形变形_变形

1、 ctx.transform(a, b, c, d, e, f) ：接受变换矩阵的六个元素作为参数，完成缩放、平移和倾斜等变形。
        a ：x轴方向缩放
        b ：x轴方向倾斜
        c ：y轴方向倾斜
        d ：y轴方向缩放
        e ：x轴方向平移
        f ：y轴方向平移
2、默认状态： transform(1,0,0,1,0,0)

 变换矩阵： a c e
                  [ b d f ]
                  0 0 1

 点 （x,y） 经过矩阵变换后得到 (x',y')

 1 、x' = ax + cy + e;
 2 、y' = bx + dy + f;

ctx.setTransform（a, b, c, d, e, f） ：重置并创建新的变换矩阵
ctx.resetTransform() ：重置当前变形为单位矩阵，它和调用以下语句是一样的：
ctx.setTransform(1, 0, 0, 1, 0, 0);
 

        ctx.fillRect(0, 0, 100, 100);//绘制参考矩形ctx.fillStyle='green'// ctx1.transform(0.5, 0, 0, 0.5, 0, 0);//缩放// ctx1.transform(1, 0, 0, 1, 50, 50);//平移// ctx1.transform(1, 1, 0, 1, 0, 0);//倾斜ctx.transform(0.5, 1, 0, 0.5, 50, 50);//综合变形ctx.fillRect(0, 100, 100, 100);//绘制变形后的矩形ctx.setTransform(0.5, 0, 0, 0.5, 0, 0);//重置并创建新的变化矩阵ctx.fillRect(0, 400, 100, 100);//绘制重置并创建新变形后的矩形

裁切路径

 ctx.clip() ：将构建的路径转换为裁剪路径，裁切路径确定好之后，再绘制图形，裁切路径内的图形可以显示，裁切路径外的图形不显示。
默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）。

 提示：
裁切路径也属于canvas状态

        var ctx = document.getElementById('canvas').getContext('2d')ctx.save()//保存状态ctx.fillRect(0, 0, 200, 200)//绘制一个跟画布一样大小的黑色矩形ctx.arc(100, 100, 50, 0, 2 * Math.PI)//定义个圆形的路径ctx.clip()// ctx.restore()// 绘制一个跟画布一样大小的黄色矩形ctx.fillStyle = 'yellow'ctx.fillRect(0, 0, 200, 200)

动画_时钟

    <canvas width="150" height="150" id="canvas"></canvas><script>var ctx = document.getElementById('canvas').getContext('2d')ctx.translate(75, 75)//移动原点到画布的正中心ctx.rotate(-Math.PI / 2)//逆时针旋转九十度ctx.lineCap = 'round'//设置线条末端样式ctx.save()clock()function clock() {ctx.clearRect(-75, -75, 150, 150)//   绘制一个跟画布一样大小的粉色矩形ctx.fillStyle = 'pink'ctx.fillRect(-75, -75, 150, 150)// 获取当前时间var now = new Date()// 绘制小时的刻度ctx.lineWidth = 3//设置线条宽度for (var i = 0; i < 12; i++) {ctx.beginPath()ctx.rotate(Math.PI / 6)ctx.moveTo(68, 0)ctx.lineTo(75, 0)ctx.stroke()}// 绘制分钟的刻度ctx.lineWidth = 2//设置线条宽度for (var i = 0; i < 60; i++) {// 如果i除以五的余数不为0，则代表不跟小时的刻度重合，则绘制分钟的刻度if (i % 5 != 0) {ctx.beginPath()ctx.moveTo(72, 0)ctx.lineTo(75, 0)ctx.stroke()}ctx.rotate(Math.PI / 30)}var hour = now.getHours()var min = now.getMinutes()var sec = now.getSeconds()hour = hour > 12 ? hour - 12 : hourconsole.log(hour)console.log(min)console.log(sec)// 绘制时针ctx.restore()ctx.save()ctx.lineWidth = 5ctx.rotate((Math.PI / 6) * (hour + min / 60 + sec / 3600))ctx.beginPath()ctx.moveTo(-10, 0)ctx.lineTo(40, 0)ctx.stroke()// 绘制分针ctx.restore()ctx.save()ctx.lineWidth = 4ctx.rotate((Math.PI / 30) * (min + sec / 60))ctx.beginPath()ctx.moveTo(-10, 0)ctx.lineTo(60, 0)ctx.stroke()// 绘制秒针ctx.restore()ctx.save()ctx.lineWidth = 3ctx.rotate((Math.PI / 30) * (sec))ctx.beginPath()ctx.moveTo(-10, 0)ctx.lineTo(60, 0)ctx.strokeStyle = 'red'ctx.stroke()// 在原点处绘制红色小圆点ctx.beginPath()ctx.arc(0, 0, 5, 0, 2 * Math.PI)ctx.fillStyle = 'red'ctx.fill()// 在秒针末端绘制小圆圈ctx.beginPath()ctx.arc(65, 0, 5, 0, 2 * Math.PI)ctx.stroke()ctx.restore()}setInterval(function () {clock()}, 1000)


动画_运动的小球

        var c = document.getElementById('canvas')var ctx = c.getContext('2d')var raf;var x = 250//定义小球的圆心的默认横坐标var y = 250//定义小球的圆形的默认纵坐标var stepX = 5//定义小球每次运动水平方向的偏移矢量var stepY = 2//定义小球每次运动垂直方向的偏移矢量function draw() {// ctx.clearRect(0, 0, 500, 500)// 每次绘制前都画一个带点透明的矩形，这样可以产生尾巴的效果ctx.fillStyle = 'rgba(255,255,255,0.3)';ctx.fillRect(0, 0, 500, 500);//根据小球的新的圆心的位置绘制小球ctx.beginPath()ctx.arc(x, y, 20, 0, 2 * Math.PI)ctx.fillStyle = 'red'ctx.fill()// 判断小球的位置.如果超出if (x + 20 >= 500 || x - 20 <= 0) {stepX = -stepX;}if (y + 20 >= 500 || y - 20 <= 0) {stepY = -stepY;}// 改变小球的位移x += stepXy -= stepY}function anim() {draw()//绘制小球//告诉浏览器我要执行一个动画，传递进去的回调函数会在每次重绘之前调用，一般情况下每秒执行60次raf = window.requestAnimationFrame(anim)}anim()// 监听鼠标的移动事件，让小球跟着鼠标移动位置c.addEventListener('mousemove',function (e) {window.cancelAnimationFrame(raf);x = e.offsetX;y = e.offsetY;draw()});// 点击鼠标，则继续开始动画c.addEventListener('click', function (e) {anim()});

引入外部SVG

 SVG ：遵循 XML 标准，用来定义可缩放矢量图形。
 1、引入外部svg文件的方式
      1.1、作为元素的背景图

#con {width:100px;height: 100px;background: url('./test.svg') no-repeat;}

   1.2、使用 img 引入

<img src="test.svg" alt="" >

 1.3、使用 object 引入

<object data="test.svg" type="image/svg+xml" />

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

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

相关文章

C# 使用NPOI操作Excel的工具类

C# 使用NPOI操作Excel的工具类

写在前面 NPOI是POI项目的.NET迁移版本。POI是一个开源的Java 读写 Excel、Word 等微软Ole2组件文档的项目&#xff1b;使用NPOI可以在没有安装Office或者相应环境的机器上对Word或Excel文档进行读写操作。 NPOI类库中操作EXCEL有两个模块分别是&#xff1a; 1️.HSSF模块&a…
阅读更多...
Spring Beans；Spring Bean的生命周期；spring Bean的作用域，spring处理线程并发问题

Spring Beans；Spring Bean的生命周期；spring Bean的作用域，spring处理线程并发问题

文章目录 Spring Beans请解释Spring Bean的生命周期解释Spring支持的几种bean的作用域Spring容器中的bean可以分为5个范围&#xff1a; Spring如何处理线程并发问题&#xff1f; 在现在的项目开发中经常使用到spring bean&#xff0c;那么来谈谈spring bean的生命周期&#xff…
阅读更多...
Lua脚本解决redis实现的分布式锁多条命令原子性问题

Lua脚本解决redis实现的分布式锁多条命令原子性问题

线程1现在持有锁之后&#xff0c;在执行业务逻辑过程中&#xff0c;他正准备删除锁&#xff0c;而且已经走到了条件判断的过程中&#xff0c;比如他已经拿到了当前这把锁确实是属于他自己的&#xff0c;正准备删除锁&#xff0c;但是此时他的锁到期了&#xff0c;那么此时线程2…
阅读更多...
(三) Windows 下 Sublime Text 3 配置Python环境和Anaconda代码提示

(三) Windows 下 Sublime Text 3 配置Python环境和Anaconda代码提示

一&#xff1a;新建一个 Python3.7 编译环境。 1 Tools--Build System--New Build System... 修改前&#xff1a; 修改后&#xff1a; 内容&#xff1a; {"cmd":["C:\\Python\\Python37-32\\python.exe","-u","$file"],"file_r…
阅读更多...
复数的几何意义

复数的几何意义

1、复平面&#xff0c;复数的其它表示法 (1)几何表示法 直角平面坐标&#xff1a; 复平面 实轴&#xff0c;虚轴 (2)向量表示法 向量 模&#xff1a; 复数加减法可用向量的三角形法则或者平行四边形法则 (3)结论 (两边之和大于第三边) ((两边之差大于第三边)) *辐角&am…
阅读更多...
FlinkCDC实现主数据与各业务系统数据的一致性（瀚高、TIDB）

FlinkCDC实现主数据与各业务系统数据的一致性（瀚高、TIDB）

文章末尾附有flinkcdc对应瀚高数据库flink-cdc-connector代码下载地址 1、业务需求 目前项目有主数据系统和N个业务系统，为保障“一数一源”，各业务系统表涉及到主数据系统的字段都需用主数据系统表中的字段进行实时覆盖，这里以某个业务系统的一张表举例说明：业务系统表Ta…
阅读更多...
pytorch安装GPU版本 (Cuda12.1)教程

pytorch安装GPU版本 (Cuda12.1)教程

使用本教程前&#xff0c;默认您已经安装并配置好了python3以上版本 1. 去官网下载匹配的Cuda Cuda下载地址 当前最高版本的Cuda是12.1 我安装的就是这个版本 小提示&#xff1a;自定义安装可以只选择安装Cuda Runtime。Nvidia全家桶不必全部安装。把全家桶全部安装完直接系统…
阅读更多...
机器人规划算法——movebase导航框架源码分析

机器人规划算法——movebase导航框架源码分析

这里对MoveBase类的类成员进行了声明&#xff0c;以下为比较重要的几个类成员函数。 构造函数 MoveBase::MoveBase | 初始化Action 控制主体 MoveBase::executeCb收到目标&#xff0c;触发全局规划线程&#xff0c;循环执行局部规划 全局规划线程 void MoveBase::planThread |…
阅读更多...
【小黑送书—第五期】＞＞《MATLAB科学计算从入门到精通》

【小黑送书—第五期】＞＞《MATLAB科学计算从入门到精通》

从代码到函数&#xff0c;从算法到实战&#xff0c;从问题到应用&#xff0c;由浅入深掌握科学计算方法&#xff0c;高效解决实际问题。 从代码到函数&#xff0c;掌握多种经典算法 跨越多个领域&#xff0c;精通各类科学计算 多种应用实例&#xff0c;高效解决实际问题 今天给…
阅读更多...
【尚跑】2023宝鸡马拉松安全完赛，顺利PB达成

【尚跑】2023宝鸡马拉松安全完赛，顺利PB达成

1、赛事背景 千年宝地&#xff0c;一马当先&#xff01;10月15日7时30分&#xff0c;吉利银河2023宝鸡马拉松在宝鸡市行政中心广场鸣枪开跑。 不可忽视的是&#xff0c;这次赛事的卓越之处不仅在于规模和参与人数&#xff0c;还在于其精心的策划和细致入微的组织。为了确保每位…
阅读更多...
操作NAND flash W25N01G

操作NAND flash W25N01G

文章目录 W25N01G1 描述2 特点3 封装3.3.2 连接线 4 引脚/CSDO/WP/Hold SPI指令标准SPI命令双SPI四元SPI命令写保护 5 地址PA与PC最后一个扇区 OTP寄存器1块保护清除块保护指令* WP-E 寄存器2寄存器3BUSYP-FAILE-FAILECC位 8 命令8.1 装置ID 指令解读写状态寄存器 注意内容上拉…
阅读更多...
今天给大家带来Python炫酷爱心代码

今天给大家带来Python炫酷爱心代码

前言&#xff1a; 这个是小编之前朋友一直要小编去做的&#xff0c;不过之前技术不够所以一直拖欠今天也完成之前的约定吧&#xff01; 至于他是谁&#xff0c;我就不多说了直接上代码 一.代码展示 import random from math import sin, cos, pi, log from tkinter import …
阅读更多...
Navicat 技术指引 | 适用于 GaussDB 的用户权限设置

Navicat 技术指引 | 适用于 GaussDB 的用户权限设置

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…
阅读更多...
SpringMVC系列-7 @CrossOrigin注解与跨域问题

SpringMVC系列-7 @CrossOrigin注解与跨域问题

背景 前段时间帮同事分析了一个跨域问题&#xff0c;正好系统分析和整理一下。 1.跨域 理解同源策略是理解跨域的前提。同源策略定义如下&#xff1a; 在同一来源的页面和脚本之间进行数据交互时&#xff0c;浏览器会默认允许操作&#xff0c;而不会造成跨站脚本攻击&#x…
阅读更多...
2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新

2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新

专项练习–持续更新 HTML篇CSS篇JS篇Vue篇TypeScript篇React篇微信小程序篇前端面试题汇总大全二&#xff08;含答案超详细&#xff0c;Vue&#xff0c;TypeScript&#xff0c;React&#xff0c;微信小程序&#xff0c;Webpack 汇总篇&#xff09;-- 持续更新 前端面试题汇总大…
阅读更多...
Wireshark的捕获过滤器

Wireshark的捕获过滤器

Wireshark的过滤器&#xff0c;顾名思义&#xff0c;作用是对数据包进行过滤处理。具体过滤器包括捕获过滤器和显示过滤器。本文对捕获过滤器进行分析。 捕获过滤器&#xff1a;当进行数据包捕获时&#xff0c;只有那些满足给定的包含/排除表达式的数据包会被捕获。 捕获过滤器…
阅读更多...
float和double（浮点型数据）在内存中的储存方法

float和double（浮点型数据）在内存中的储存方法

作者&#xff1a;元清加油 主页&#xff1a;主页 编译环境&#xff1a;visual studio 2022 (x86) 相信大家都知道数据在内存中是以二进制储存的 整数的储存方法是首位是符号位&#xff0c;后面便是数值位 那么浮点数在内存中是怎么储存的呢&#xff1f;我们先来看一个例子&am…
阅读更多...
深度学习技巧应用30-深度学习中的GPU的基本架构原理与应用技巧

深度学习技巧应用30-深度学习中的GPU的基本架构原理与应用技巧

大家好，我是微学AI，今天给大家介绍一下深度学习技巧应用30-深度学习中的GPU的基本架构原理与应用技巧，GPU是一种专门用于处理大量并行操作的硬件设备，它的架构设计主要是为了图形渲染。然而，由于其并行处理能力，现在广泛应用于深度学习、科学计算等领域。主要的GPU制造商…
阅读更多...
C#，《小白学程序》第十九课：随机数（Random）第六，随机生成任意长度的大数（BigInteger）

C#，《小白学程序》第十九课：随机数（Random）第六，随机生成任意长度的大数（BigInteger）

1 文本格式 using System; using System.Linq; using System.Text; using System.Collections.Generic; /// <summary> /// 大数的&#xff08;加减乘除&#xff09;四则运算、阶乘运算 /// 乘法计算包括小学生算法、Karatsuba和Toom-Cook3算法 /// 除法运算为 Truffer…
阅读更多...
【数据结构】什么是队列?

【数据结构】什么是队列?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;队列的定义 &#x1f4cc;队列的抽象数据类型 &#x1f4cc;队列的顺序存储结构 &#x1f4cc;队列的链式存储结构 结语 人生,是一个又一个小小的队列…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023