HTML5(六)——Canvas 高级操作
xsobi 2024-12-01 05:38 18 浏览
上一篇文章《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 绘制的矩形框放大两倍,代码如下:
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:绘制两个一样的矩形,一个在平移前绘制,一个在平移后绘制,代码如下:
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>
相关推荐
- 249个Linux Shell脚本经典案例,拿来即用(附PDF)
-
作为一名Linux运维工程师,会写好的脚本不仅能提高工作效率,还能有更多的时间做自己的事。最近在网上冲浪的时候,发现大家对Shell脚本都有“心结”,要么觉得自己写出来不好看,要么根本无从下手。下...
- 分享一个实用脚本—centos7系统巡检
-
概述这周闲得慌,就根据需求写了差不多20个脚本(部分是之前分享过的做了一些改进),今天主要分享一个给平时运维人员用的centos7系统巡检的脚本,或者排查问题检查系统情况也可以用..实用脚本#!/bi...
- Go 语言 Web 框架 Echo 系列:基础篇—搭建 Echo 开发环境
-
工欲善其事必先利其器。我们先搞定Echo环境。Go开发环境这个系列基于Go1.14.4,Linux系统。安装Go的方式有很多,可以在这里https://studygolang.com/...
- 连Shell的基本输出都不会,还写什么脚本?echo和printf命令总结
-
在Linux系统中使用echo命令和printf命令都可以实现信息的输出功能,下面我们分别看这两个命令的应用案例。echo1.使用echo命令创建一个脚本文件菜单功能描述:echo命...
- 在Linux中改变echo输出颜色的方法
-
技术背景在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色。例如,在脚本中使用不同颜色区分错误信息、警告信息和正常信...
- Spring框架中applicationContext.xml和spring - servlet.xml的区别
-
技术背景在Spring框架里,applicationContext.xml和spring-servlet.xml是两个重要的配置文件。Spring允许在父子层次结构中定义多个上下文,这两个文件在不...
- Tomcat服务器配置与优化:让Java应用飞得更高更远
-
Tomcat服务器配置与优化:让Java应用飞得更高更远Tomcat作为一款轻量级且功能强大的开源JavaServlet容器,无疑是许多中小型项目的首选服务器。然而,Tomcat的性能和稳定性并非天...
- 分享 5 个正则表达式的实际应用场景案例
-
转载说明:原创不易,未经授权,谢绝任何形式的转载在计算机编程的广泛领域中,某些技术具有改变我们如何处理和提取文本内容中信息的能力。在这些强大工具中,正则表达式成为每个开发者工具库中基本且不可或缺的组成...
- 最简洁详细的SSM框架整合(ssm框架详细介绍)
-
创建项目和SSM框架整合思路一、创建项目因为后面会配置springMVC,所以用IDEA的web骨架创建一个maven项目。创建项目目录如下,同时,项目需要的包和文件已手动创建好了:项目目录上图中,a...
- 使用JSP 2避免JSP文件中的Java代码
-
技术背景在早期的JSP开发中,使用脚本片段(<%%>、<%!%>、<%=%>)嵌入Java代码是常见做法,但这种方式存在诸多弊端。随着JSP2的出现,标签库...
- 微信安卓测试版8.0.28开发者更新内容公布
-
IT之家9月7日消息,微信安卓平台迎来了8.0.28测试版更新,相比上一次更新安装包体积有所减小,文件详细信息如下:微信安卓内测版8.0.28(ARM64)安装包文件大小254MB...
- 疯传阿里内网的SpringMVC笔记,被一个离职员工泄露,手慢无
-
一、简介1.介绍SpringMVC是实现MVC的轻量级Web框架,底层封装了servlet2.特点1.轻量级,简单易学2.约定优于配置3.与Spring兼容性好,无缝结合5.支持直接一个方法对一...
- 学习笔记之Struts2—工作原理图(struts1工作原理)
-
本文以Struts2的官方工作原理图作为主线讲解(参考部分书籍与视频)1.初始概念struts2是web.xml进行配置的一个过滤器,当web项目启动的时候,这个过滤器就会生效。2.web.xml&l...
- Spring MVC工作流程及请求处理机制全解
-
SpringMVC工作流程及请求处理机制全解作为一个Java开发者,你一定对Spring框架有所耳闻。今天我们就来详细聊聊SpringMVC,这是Spring家族中最常用的Web层框架之一。Spr...
- 在Javaweb中实现发送简单邮件(java实现邮件收发)
-
前言当我们在一个网站中进行注册账户成功后,通常会收到一封来自该网站的邮件。邮件中显示我们刚刚申请的账户和密码以及一些其他的广告信息。在上一篇中用Java实现了发送qq邮件的功能,今天我们来实现一个这样...
- 一周热门
- 最近发表
-
- 249个Linux Shell脚本经典案例,拿来即用(附PDF)
- 分享一个实用脚本—centos7系统巡检
- Go 语言 Web 框架 Echo 系列:基础篇—搭建 Echo 开发环境
- 连Shell的基本输出都不会,还写什么脚本?echo和printf命令总结
- 在Linux中改变echo输出颜色的方法
- Spring框架中applicationContext.xml和spring - servlet.xml的区别
- Tomcat服务器配置与优化:让Java应用飞得更高更远
- 分享 5 个正则表达式的实际应用场景案例
- 最简洁详细的SSM框架整合(ssm框架详细介绍)
- 使用JSP 2避免JSP文件中的Java代码
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- characterencodingfilter (33)
- getmonth (34)
- label换行 (33)
- android studio 3 0 (34)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- xmlhttp (35)
- mysql更改密码 (34)
- 权限777 (33)
- htmlposition (33)
- 学校网站模板 (34)
- textarea换行 (34)
- 轮播 (34)
- asp net三层架构 (38)
- bash (34)