百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

HTML5(六)——Canvas 高级操作

xsobi 2024-12-01 05:38 19 浏览

上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形,这节开始介绍canvas的高级操作。

一、canvas 转换

canvas 转换常用的几种方法介绍,如下:

方法

描述

scale()

缩放当前绘图至更大或更小。

rotate()

旋转当前绘图。

translate()

重新映射画布上的 (0,0) 位置。

transform()

替换绘图的当前转换矩阵。

setTransform()

将当前转换重置为单位矩阵。然后运行 transform()。

1.1 、scale - 缩放

使用语法:scale(x,y)

x:表示水平方向的缩放倍数

y:表示垂直方向的缩放倍数

eg:canvas 绘制的矩形框放大两倍,代码如下:

Bash
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.scale(2,2)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

1.2、translate - 画布平移

使用语法:translate(x,y)

x:添加到水平坐标上的位置

y:添加到垂直坐标上的位置

设置之后开始绘制的图片位置从(x,y)算起。

eg:绘制两个一样的矩形,一个在平移前绘制,一个在平移后绘制,代码如下:

Bash
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle="red"
        
ctx.fillRect(0,0,200,200)
//平移
ctx.translate(200,200)
ctx.fillRect(0,0,200,200)

运行结果如图:

1.3 、rotate - 旋转

使用语法:rotate(angle)

angle 旋转弧度,如果想使用角度,可以把角度转成弧度,公式为:deg * Path.PI/180。

eg:将一个矩形旋转45度,代码如下:

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
//旋转45度
ctx.rotate(45*Math.PI/180)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

运行结果如图:

根据上述结果我们发现旋转的时候,默认原点是画布的起始点,我们想要的旋转是在矩形框中心为原点的旋转,此时我们需要借助上translate平移,重置一下原点,修改上述代码为:

<canvas width="400" height="400" id="canvas"></canvas>

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.translate(200,200)
ctx.rotate(45*Math.PI/180)
ctx.translate(-200,-200)

ctx.fillStyle="red"
ctx.fillRect(100,100,200,200)

运行结果如图:

1.4、transform - 矩阵变换

使用语法:transform(a,b,c,d,e,f)

  • a:水平缩放
  • b:水平倾斜
  • c:垂直倾斜
  • d:垂直缩放
  • e:水平移动
  • f:垂直移动

transform可以替代前边平移、缩放、旋转三者,如下:

// 平移
translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)
// 缩放
sacle(x,y) <=> transform(x,0,0,y,0,0) 
// 旋转
rotate(angle) <=> transform(Math.cos(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180))

1.5、setTransform - 矩阵变换

setTransform()方法将变换的矩阵进行重置,它把当前的变换矩阵重置为单位矩阵
使用语法:transform(a,b,c,d,e,f)
各参数说明:水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动

setTransform() 方法把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行 transform()

二、canvas 操作图片

drawImage() 在画布上绘制图像、画布或视频。也能够绘制图片的一部分,增加或减少图像的尺寸。以下是三种常见使用语法:

  • 语法1:drawImage( img , x , y )
  • 语法2:drawImage( img , x , y , width , height )
  • 语法3:drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

上述参数表示的意义如下:

参数

描述

img

规定要使用的图像、画布或视频。

sx

可选。开始剪切的 x 坐标位置。

sy

可选。开始剪切的 y 坐标位置。

swidth

可选。被剪切图像的宽度。

sheight

可选。被剪切图像的高度。

x

在画布上放置图像的 x 坐标位置。

y

在画布上放置图像的 y 坐标位置。

width

可选。要使用的图像的宽度。(伸展或缩小图像)

height

可选。要使用的图像的高度。(伸展或缩小图像)

eg:利用语法3,进行绘制图片的部分内容,实现如下效果:

给上述兔子顺便加一个点击屏幕暂停开始功能,完整代码如下:

<canvas width="400" height="400" id="canvas"></canvas>
<script>
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
 var img = new Image()
 let pause = false,frameCounter = 0,i=0;
 img.src = "./rotate.png"
 img.onload = function(){
  requestAnimationFrame(next)
 }
function next(){
 ctx.clearRect(0,0,canvas.width,canvas.height)
 if(frameCounter%5 == 0){ //frameCounter 控制动画速度
  i++
  if(i==11)i=0
 }
 ctx.drawImage(img,
  0,i*240,240,240,
  0,0,240,240) // 每张图片宽高都是240,具体参数根据图片而定
  frameCounter ++
  if(!pause)requestAnimationFrame(next)
 }
window.onclick = function(){
 pause = !pause
 next()
}
</script>

eg:使用 canvas 画布处理视频,使用定时器绘制视频的当前帧,连续起来就是一个视频,需要注意的是必须处理暂停和开始播放两种操作,具体代码如下:

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

三、像素级操作

常见的像素级的操作有三种:

  • getImageData() - 获取画布像素数据
  • createImageData() - 创建新的、空白像素
  • putImageData() - 图像像素数据放回画布

3.1、getImageData

使用语法:getImageData( x , y , width , height )

  • x:要被提取的图像数据矩形区域的左上角 x 坐标。
  • y:要被提取的图像数据矩形区域的左上角 y 坐标。
  • width:被提取的图像数据矩形区域的宽度
  • height:被提取的图像数据矩形区域的高度

返回一个 imageData 对象,用来描述 canvas 区域隐含的像素数据,这个区域通过像素表示,起点是( x , y ),宽高为 widht 和 height 。

imageData 对象包含三个属性:

  • imageData.height - 像素描述的矩形实际高度。
  • imageData.width - 像素描述的矩形实际宽度。
  • imageData.data - 包含 rgba 顺序数据的一个数组,数据使用0-255直接整数表示。

3.2、createImageData

使用语法:

createImageData( width , height )

创建一个空白的 imageData 对象,新对象的默认像素值 transparent black。对于imageData对象中的每个像素值,都存在 rgba 这四方面的信息,即:

  • r - 红色(0-255)
  • g - 绿色(0-255)
  • b - 蓝色(0-255)
  • a - alpha(0-255,0是透明,255是完全可见)

新对象默认像素值为(0,0,0,0)。

eg:如果我们想把 imageData 中一个像素变为红色时,可以改变第一和第四位信息,代码如下:

var imageData = ctx.createImageData(100,100)
imageData.data[0] = 255
imageData.data[1] = 0
imageData.data[2] = 0
imageData.data[3] = 255

3.1、putImageData

使用语法:

putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

参数及意义:

参数

描述

imgData

规定要放回画布的 ImageData 对象。

x

ImageData 对象左上角的 x 坐标,以像素计。

y

ImageData 对象左上角的 y 坐标,以像素计。

dirtyX

可选。水平值(x),以像素计,在画布上放置图像的位置。

dirtyY

可选。水平值(y),以像素计,在画布上放置图像的位置。

dirtyWidth

可选。在画布上绘制图像所使用的宽度。

dirtyHeight

可选。在画布上绘制图像所使用的高度。

通过 getImageData 复制的指定矩形像素数据,编辑之后,通过 putImageData 方法将图像数据放回画布上。

eg:添加滤镜效果:上述兔子是白色的变换成红色兔子,这时需要把绿色和蓝色都设置成0即可,代码如下:

<canvas width="400" height="400" id="canvas"></canvas>
<script>
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
 var img = new Image()
 let w = canvas.width,h = canvas.height;
 img.src = "./rotate.png"
 img.onload = function(){
  ctx.drawImage(img,0,0,240,240,0,0,240,240)
 let imageData = ctx.getImageData(0,0,w,h)
 for(let r=0;r<w;r++){
  for(let c=0;c<h;c++){
   imageData.data[(r*w+c)*4+2 ] = 0 // 把蓝色设置成0
   imageData.data[(r*w+c)*4+1] = 0 // 把蓝色设置成0
  }
 }
 ctx.putImageData(imageData,0,0)
}
</script>

相关推荐

在 Linux 系统中安装 Redis 的详细步骤

以下是在Linux系统中安装Redis的详细步骤,支持通过包管理器安装(简单快捷)和源码编译安装(获取最新版本)两种方式:方法1:使用包管理器安装(推荐新手)适用于Ubuntu/De...

在Linux系统上安装Redis集群的详细步骤

以下是在Linux系统上安装Redis集群的详细步骤,基于Redis6.x+版本,采用三主三从(6个节点)的典型配置模式:1.安装前准备环境要求系统:Ubuntu/CentOS等主流Linux发行...

Linux入门使用教程

Linux入门一、初始化配置CentOS初始化安装在开始熟悉Linux操作命令之前,我们必须先搭建好Linux操作系统环境,我们这里选用的是Linux的发行版本CentOS7,在安装好CentOS操作...

06新手学习:Linux入门级命令教程

1、开启终端问题:什么是终端(Terminal)答:Linux操作系统中用于输入命令的位置打开后,效果如下图所示:2、Linux命令格式什么是Linux的命令?答:就是指在Linux终端(命令行)...

【笔记】windows10安装linux双系统教程(可能是现今最简单方法)

这周测试成功了大牛漂移菌教的树莓派系统镜像的压缩方法(【树莓派】小空间树莓派镜像系统备份方法img镜像文件压缩方法),虚拟机下备份镜像不太方便,无论是存储空间还是读卡操作都不方便。所以打算装个linu...

网络安全工程师:小白是如何让Kali Linux操作系统从U盘成功启动

一、背景介绍作为一名渗透测试工作人员(或者小白),在我们的日常工作或者学习中,我们不可能时时刻刻将自己的个人电脑(安装好KaliLinux的个人主机)带在身边,当我们没有带自己的个人电脑而需要进行渗...

Linux配置ip地址的两种方法

Linux配置ip地址的两种方法,实验环境为centos7.6方法1:nmcli工具配置(centos7以下版本不支持该方法)第一步,通过nmcliconnection查看网卡名称[root@lo...

Linux man 命令使用教程

简介man=manual(手册)命令用来查看Linux系统命令、函数、配置文件、系统调用等的官方文档。几乎所有标准程序和工具都有对应的man手册。基本语法man[options][s...

Linux程序安装与管理指南

在Linux系统中,安装和管理程序主要通过包管理器和手动编译安装两种主要方式实现。以下是详细的操作指南,涵盖常见发行版(如Ubuntu/Debian、CentOS/RHEL、Fedora等)的用法。一...

零基础保姆级教程!手把手教你免费玩转Linux安装+学习环境搭建!

前期准备安装VMware虚拟机首先你要安装VMware虚拟机,如果你还不知道VMware是什么可以去看我的VMware相关教程,里面有详细解答检查V-CPU虚拟化是否开启当我们在虚拟机安装系统的...

网络安全工程师:小白如何使用Kali Linux生成木马后门并实现免沙

1.背景介绍msfvenom是msfpayload和msfencode的结合体,可利用msfvenom生成木马程序,并在目标机上执行,在本地监听上线,在黑客圈子,这款工具略有名气。本次教程是Msfve...

Linux详解系列一:如何安装系统及客户端工具的使用

Linux是一种开放源码的操作系统,和Windows不同的是,由于其具有开源,稳定性强,安全,多用户操作等特点,它的使用场景非常广泛,比如企业中所使用的服务器中的操作系统,以及移动端的Andr...

4种方案供你选,微软发布《如何下载和安装Linux》教程

IT之家10月14日消息,微软近日发布了一个教程指南《如何下载和安装Linux》,介绍了使用WSL、本地安装、本地虚拟机和云端虚拟机4种方案。该指南重点介绍了用户在PC上运行Li...

嵌入式Linux开发教程:Linux Shell

本章重点介绍Linux的常用操作和命令。在介绍命令之前,先对Linux的Shell进行了简单介绍,然后按照大多数用户的使用习惯,对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂,都给...

Linux基础手把手教学:使用22.04系统

Linux基础手把手教学:使用Ubuntu22.04系统。1.这节来讲一下下边的目录结构,因为只有清楚了解linux下边的目录结构,才能很方便地进行操作。linux下边的目录结构较为简单...