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.mzph.cn/news/169409.shtml

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

相关文章

每日一题：LeetCode-103/107.二叉树的(层序/锯齿形层序)遍历

每日一题：LeetCode-103/107.二叉树的(层序/锯齿形层序)遍历

每日一题系列&#xff08;day 04&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…
阅读更多...
AD9528学习笔记

AD9528学习笔记

前言 AD9528是ADI的一款时钟芯片&#xff0c;由2-stage PLL组成&#xff0c;并且集成JESD204B/JESD204C SYSREF信号发生器&#xff0c;SYSREF发生器输出单次、N次或连续信号&#xff0c;并与PLL1和PLL2输出同步&#xff0c;从而可以实现多器件之间的同步。 AD9528总共有14路输…
阅读更多...
JMeter+Python 实现异步接口测试

JMeter+Python 实现异步接口测试

当使用JMeter和Python来实现异步接口测试时&#xff0c;可以按照以下步骤进行操作&#xff1a; 1、安装JMeter和Java Development Kit&#xff08;JDK&#xff09;&#xff1a; 下载并安装JMeter&#xff08;https://jmeter.apache.org/download_jmeter.cgi&#xff09;和适用…
阅读更多...
性能优化中使用Profiler进行内存泄露的排查及解决方式

性能优化中使用Profiler进行内存泄露的排查及解决方式

文章目录 一、前言二、内存泄露的排查方式三、参考链接 一、前言 对于常规意义上的线程使用要及时关闭&#xff0c;数据库用完要及时关闭&#xff0c;数据用完要及时清空等等这里不再赘述&#xff0c;但是在开发中总会有不熟悉的api&#xff0c;开发进度过快&#xff0c;开发人…
阅读更多...
网络通信基础概念介绍

网络通信基础概念介绍

网络通信基础概念介绍 局域网LAN 局域网&#xff0c;即 Local Area Network&#xff0c;简称LAN。 局域网内的主机之间能方便的进行网络通信&#xff0c;又称为内网&#xff1b;局域网和局域网之间在没有连接的情况下&#xff0c;是无法通信的。 局域网是指在一个相对较小的…
阅读更多...
【【linux C 编程记述 之 VIM的用法讲述】】

【【linux C 编程记述 之 VIM的用法讲述】】

linux C 编程记述 之 VIM的用法讲述 我们所说的编写代码包括两部分&#xff1a;代码编写和编译&#xff0c;在Windows下可以使用Visual Studio来完成这两部&#xff0c;可以在 Visual Studio 下编写代码然后直接点击编译就可以了。但是在 Linux 下这两部分是分开的&#xff0c…
阅读更多...
Linux：Ubuntu虚拟机安装详解：VMware下的逐步指南

Linux：Ubuntu虚拟机安装详解：VMware下的逐步指南

目录 1. centOS系统 2. ubuntu系统 1. 下载Ubuntu映像 step1 step2 step3 2. 新建虚拟机 step1 step2 Step3 step4 step5 step6 内存 内核 映像 显示 网络 3. 网络配置 NAT模式 本机IP获取 ​编辑 bridge模式 4. 开启虚拟机 5. 虚拟机常用配置 语言 …
阅读更多...
图解扫码支付过程

图解扫码支付过程

阅读更多...
Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip

Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip

Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip 文章目录 Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip一、more1.1 输出重定向>和>>1.2 输入重定向< 二、 再谈一切皆文件三、less指令【重要】四、head指令五、tail指令…
阅读更多...
Banana Pi BPI-R3 Mini 开源路由器，也能拍出艺术美感

Banana Pi BPI-R3 Mini 开源路由器，也能拍出艺术美感

香蕉派BPI-R3 Mini路由器板开发板采用联发科MT7986A(Filogic 830)四核ARM A53芯片设计&#xff0c;板载2G DDR 内存&#xff0c;8G eMMC和128MB SPI NAND存储&#xff0c;是一款非常高性能的开源路由器开发板&#xff0c;支持Wi-Fi6 2.4G/5G&#xff08;MT7976C&#xff09;&am…
阅读更多...
ACL权限

ACL权限

ACL权限 目录&#xff1a; 1. 什么是ACL 2. 操作步骤 1. 什么是ACL ACL是Access Control List的缩写&#xff0c;即访问控制列表 每个项目成员在有一个自己的项目目录&#xff0c;对自己的目录有完全权限 项目组中的成员对项目目录也有完全权限 其他人对项目目录没有…
阅读更多...
Ubuntu 安装 JMeter：轻松上手

Ubuntu 安装 JMeter：轻松上手

Apache JMeter 是一个开源的负载测试工具&#xff0c;可以用于测试静态和动态资源&#xff0c;确定服务器的性能和稳定性。在本文中&#xff0c;我们将讨论如何下载和安装 JMeter。 安装 Java&#xff08;已安装 Java 的此步骤可跳过&#xff09; 要下载 Java&#xff0c;请遵…
阅读更多...
JSP：JDBC

JSP：JDBC

JDBC&#xff08;Java Data Base Connectivity的缩写&#xff09;是Java程序操作数据库的API&#xff0c;也是Java程序与数据库相交互的一门技术。 JDBC是Java操作数据库的规范&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;它对数据库的操作提供基本方法&#…
阅读更多...
leetCode 226.翻转二叉树

leetCode 226.翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 示例 1: 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root…
阅读更多...
AR眼镜双目光波导/主板硬件方案

AR眼镜双目光波导/主板硬件方案

AR(增强现实)技术的发展离不开光学元件&#xff0c;而在其中&#xff0c;光波导和Micro OLED被视为AR眼镜光学方案的黄金搭档。光学元件在AR行业中扮演着核心角色&#xff0c;其成本高昂且直接影响用户体验的亮度、清晰度和大小等因素。AR眼镜的硬件成本中&#xff0c;光机部分…
阅读更多...
11.与JavaScript深入交流-[js一篇通]

11.与JavaScript深入交流-[js一篇通]

文章目录 1.变量的使用1.1基本用法1.2理解 动态类型 2.基本数据类型2.1number 数字类型2.1.1数字进制表示2.1.2特殊的数字值 2.2string 字符串类型2.2.1基本规则2.2.2转义字符2.2.3求长度2.2.4字符串拼接 2.3boolean 布尔类型2.4undefined 未定义数据类型2.5null 空值类型 3.运…
阅读更多...
讲述 什么是鸿蒙 为什么需要鸿蒙 为什么要学习鸿蒙

讲述 什么是鸿蒙 为什么需要鸿蒙 为什么要学习鸿蒙

首先 我们为什么要学习鸿蒙开发&#xff1f; 因为 鸿蒙发展前景巨大 鸿蒙自发布依赖 一直受社会各界关注 强两百的 App厂商 大部分接受了与鸿蒙的合作 硬件也有非常多与鸿蒙合作的厂商 鸿蒙的合作企业基本已经覆盖整个互联网客户的主流需求 所以鸿蒙的崛起不过是早晚的问题 …
阅读更多...
软件设计师：计算机组成与体系结构之计算机基础知识

软件设计师：计算机组成与体系结构之计算机基础知识

计算机基础知识 数据的表示 码制及进制转换 原码&#xff1a;将数值转成二进制反码&#xff1a;正数与原码完全相同&#xff1b;负数&#xff0c;除了符号位其他位取反补码&#xff1a;正数与原码完全相同&#xff1b;负数&#xff0c;在补码的基础上加1移码&#xff1a;补码…
阅读更多...
TCP/IP、Http、Socket之间的区别

TCP/IP、Http、Socket之间的区别

目录 前言 一、TCP/IP协议 二、HTTP协议 三、Socket通信机制 四、TCP/IP、HTTP和Socket之间的区别 总结 前言 TCP/IP、HTTP和Socket是计算机网络中的三个重要概念&#xff0c;它们之间有着密切的联系和区别。 一、TCP/IP协议 TCP/IP是指传输控制协议/因特网协议&#x…
阅读更多...
Pygame游戏实战五：拼图游戏

Pygame游戏实战五：拼图游戏

介绍模块 本游戏使用的是由Pycharm中的pygame模块来实现的&#xff0c;也可以在python中运行。通过Pygame制作一个拼图游戏&#xff0c;将一个完整的图片进行随机切分&#xff0c;在将其进行还原成完整的图像&#xff0c;看看这个是你小时候玩的游戏吗&#xff1f; 最小开发框…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023