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

news2024/11/15 8:44:11

目录

绘制图像_缩放图像

绘制图像_图像切片

Canvas状态的保存和恢复

图形变形_平移

图形变形_旋转

图形变形_缩放

图形变形_变形

裁切路径

动画_时钟

动画_运动的小球

引入外部SVG


绘制图像_缩放图像

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

       function draw(imgUrl, x, y) {
            // 定义img
            var 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*200
            ctx.drawImage(img, 50, 50, 50,50, 100, 100, 200, 200)
       }
         //绘制矩形
        ctx.lineWidth = 30
        ctx.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 : hour
            console.log(hour)
            console.log(min)
            console.log(sec)
            // 绘制时针
            ctx.restore()
            ctx.save()
            ctx.lineWidth = 5
            ctx.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 = 4
            ctx.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 = 3
            ctx.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 += stepX
            y -= 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.coloradmin.cn/o/1248590.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

R语言——图解taxize,强烈推荐收藏关注,持续更新中

图解taxize 1. taxize分解思路1.1 图解说明 2. 针对不同数据库的函数组2.1 APGⅢ2.2 BOLD&#xff08;barcode of life data system&#xff09; 1. taxize分解思路 taxize可以帮助人们从许多数据库中获取信息。 由于要处理的数据库很多&#xff0c;导致taxize包含的功能函数…

一文教你开启真人3D手办生意

真人手办定制是现代数字化技术结合文化创意视角而诞生的一种新型消费场景。在3D技术的辐射之下&#xff0c;真人3D手办生产与销售的是产销合一的数字化产品&#xff0c;想要实现这种精准消费的高效化、规模化&#xff0c;既需要专业技术也需要在线平台&#xff0c;一旦通路达成…

Ubuntu18.4中安装wkhtmltopdf + Odoo16配置【二】

deepin Linux 安装wkhtmltopdf 1、先从官网的链接里下载linux对应的包 wkhtmltopdf/wkhtmltopdf 下载需要的版本&#xff0c;推荐版本&#xff0c;新测有效&#xff1a; wkhtmltox-0.12.4_linux-generic-amd64.tar.xz 2、解压下载的文件 解压后会有一个wkhtmltox文件夹 3…

linux高级篇基础理论六(firewalld,防火墙类型,,区域,服务端口,富语言)

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️不能因为人生的道路坎坷,就使自己的身躯变得弯曲;不能因为生活的历程漫长,就使求索的 脚步迟缓。 ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xff1a;云计算技…

『亚马逊云科技产品测评』活动征文|低成本搭建物联网服务器thingsboard

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 0. 环境 - ubuntu22&#xff08;注意4G内存勉强够&#xff0c;部署完…

【Linux】进程间通信——进程间通信的介绍和分类、管道、匿名管道、命名管道、匿名管道与命名管道的区别

文章目录 进程间通信1.进程间通信的介绍1.1目的和发展 2.进程间通信分类3.管道3.1匿名管道3.1.1匿名管道的原理&#xff08;文件角度&#xff09;3.1.2匿名管道的原理&#xff08;内核角度&#xff09;3.1.3管道读写规则3.1.4管道特点 3.2命名管道3.2.1创建命名管道3.2.2命名管…

Twincat使用:EtherCAT通信扫描硬件设备链接PLC变量

EtherCAT通信采用主从架构&#xff0c;其中一个主站设备负责整个EtherCAT网络的管理和控制&#xff0c;而从站设备则负责在数据环网上传递数据。 主站设备可以是计算机、工控机、PLC等&#xff0c; 而从站设备可以是传感器、执行器、驱动器等。 EL3102:MDP5001_300_CF8D1684;…

【文末送书】机器学习高级实践

2023年初是人工智能爆发的里程碑式的重要阶段&#xff0c;以OpenAI研发的GPT为代表的大模型大行其道&#xff0c;NLP领域的ChatGPT模型火爆一时&#xff0c;引发了全民热议。而最新更新的GPT-4更是实现了大型多模态模型的飞跃式提升&#xff0c;它能够同时接受图像和文本的输入…

OpenStack云计算平台-镜像服务

目录 一、镜像服务概览 二、安装和配置 1、先决条件 2、安全并配置组件 3、完成安装 三、验证操作 一、镜像服务概览 OpenStack镜像服务是IaaS的核心服务&#xff0c;如同 :ref:get_started_conceptual_architecture所示。它接受磁盘镜像或服务器镜像API请求&#xff0c;…

浏览器缓存控制讲解

缓存的作用 在你访问互联网中的任何资源其所产生的任何链路中的每一个节点几乎都会进行缓存&#xff0c;整个缓存体系和细节十分复杂。比如浏览器缓存&#xff0c;服务器缓存&#xff0c;代理服务器缓存&#xff0c;CDN缓存等。 但是缓存又十分重要&#xff0c;不可缺少&…

matlab三维地形图

matlab三维地形图 %%%%—————Code to draw 3D bathymetry—————————— %-------Created by bobo,10/10/2021-------------------- clear;clc;close all; ncdisp E:\data\etopo\scs_etopo.nc filenmE:\data\etopo\scs_etopo.nc; londouble(ncread(filenm,lon)); lat…

P8 C++引用

前言 本期我们要讲的是 C 中的引用。 上期我们讨论了指针&#xff0c;如果你没有看过那期内容&#xff0c;你一定要回去看看&#xff0c;因为引用实际上只是指针的扩展&#xff0c;你至少需要在基本层面上理解指针是如何工作的&#xff0c;然后才能继续学习本期的内容&#xf…

第一百七十八回 介绍一个三方包组件:SlideSwitch

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何创建垂直方向的Switch"相关的内容&#xff0c;本章回中将 介绍SlideSwitch组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们…

哈希表的认识与实现

哈希的概念 可以不经过任何比较&#xff0c;一次直接从表中得到要搜索的元素。如果构造一种存储结构&#xff0c;通过某种函数(hashFunc)使元素的存储位置与它的关键码之间能够建立一一映射的关系&#xff0c;那么在查找时通过该函数可以很快找到该元素。 所以当我们设置这种…

【数据结构】—搜索二叉树(C++实现,超详细!)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;消えてしまいそうです—真夜中 1:15━━━━━━️&#x1f49f;──────── 4:18 &#x1f504; ◀️ ⏸ ▶️…

《微信小程序从入门到精通》---笔记1

小程序&#xff0c;我又来学习啦&#xff01;请多关照~ 项目驱动 小程序开发建议使用flex布局在小程序中&#xff0c;页面渲染和业务逻辑是分开的&#xff0c;分别运行在不同的线程中。Mini Program于2017年1月7号正式上线小程序的有点&#xff1a;跨平台、开发门槛低、开发周…

基于战争策略算法优化概率神经网络PNN的分类预测 - 附代码

基于战争策略算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于战争策略算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于战争策略优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

SSL握手失败的解决方案

一、SSL握手失败的原因&#xff1a; 1&#xff0c;证书过期&#xff1a;SSL证书有一个有效期限&#xff0c;如果证书过期&#xff0c;就会导致SSL握手失败。 2&#xff0c;证书不被信任&#xff1a;如果网站的SSL证书不被浏览器或操作系统信任&#xff0c;也会导致SSL握手失败…

(Matalb时序预测)GA-BP遗传算法优化BP神经网络的多维时序回归预测

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码 四、本文代码数据说明手册分享&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matalb平台编译&am…

C#,《小白学程序》第四课:数学计算,总和与平均值

程序是 数据 计算 显示。 1 文本格式 /// <summary> /// 《小白学程序》第四课&#xff1a;数学计算 /// 这节课超级简单&#xff0c;就是计算成绩的平均值&#xff08;平均分&#xff09; /// 这个是老师们经常做的一件事。 /// </summary> /// <param name&…