Canvas学习笔记 | 图片操作
bigegpt 2025-01-16 18:05 3 浏览
前言
大家好，我是汪小成。最近在学习Canvas。这篇文章是我学习Canvas图片操作时记的笔记，欢迎大家审阅。
图片素材
本篇文章的示例采用下图进行图片操作演示。
图片原始尺寸为：640px * 640px。
绘制图片
在Canvas中，我们使用drawImage()方法绘制图片。drawImage()方法有如下3种调用方式：
- drawImage(image, dx, dy)
- drawImage(image, dx, dy, dw, dh)
- drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
drawImage(image, dx, dy)
语法：
ctx.drawImage(image, dx, dy);说明：
- 参数image表示页面中的图片。图片有两种获取方法：（1）由JS动态创建（2）直接获取DOM中已经存在的图片。
- 参数dx表示图片左上角的横坐标；
- 参数dy表示图片左上角的纵坐标；
示例：图片由JS动态创建
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>X轴方向上的缓动动画</title>
<script type="text/javascript" src="ball.js"></script>
</head>
<body>
<canvas
id="canvas"
width="800"
height="800"
style="border: 1px dashed #333333"
></canvas>
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var image = new Image();
image.src = "flower-20221202.png";
image.onload = function () {
ctx.drawImage(image, 0, 0);
};
};
</script>
</body>
</html>效果图：
说明：
本示例中，我们通过JS创建了一个Image对象，然后通过设置该对象的src属性指定了图片的路径。最后，我们为Image对象添加了onload事件监听，只有当图片加载完成后再使用drawImage()方法将图片绘制在Canvas上。
注意：只有当图片完全加载后才能将图片绘制到Canvas上。如果图片还未加载完成就调用了drawImage()方法进行图片绘制操作的话，Canvas将不会显示任何图片。
示例：图片来自img元素
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片操作简单示例</title>
</head>
<body>
<canvas
id="canvas"
width="800"
height="800"
style="border: 1px dashed #333333"
></canvas>
<img src="flower-20221202.png" id="pic" style="display: none" />
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var image = document.getElementById("pic");
ctx.drawImage(image, 0, 0);
};
</script>
</body>
</html>说明：
本示例中的图片来自于HTML的img元素。这种方式的优点在于在JS执行时图片已经加载完成，不需要使用`image.onload = function () {}'。
drawImage(image, dx, dy, dw, dh)
语法：
ctx.drawImage(image, dx, dy, dw, dh);说明：
参数image、dx、dy跟drawImage(image, dx, dy)参数含义一样。
参数dw为图片宽度；参数dh为图片高度。
通过这种方式绘制图片可以先将图片进行缩放，然后再绘制到Canvas中。
示例：裁判图片示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片操作简单示例</title>
</head>
<body>
<canvas
id="canvas"
width="400"
height="400"
style="border: 1px dashed #333333"
></canvas>
<img src="flower-20221202.png" id="pic" style="display: none" />
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var image = document.getElementById("pic");
ctx.drawImage(image, 0, 0, 320, 320);
};
</script>
</body>
</html>效果图：
说明：
可以看到，图片原始大小为640px * 640px，我们使用drawImage(image, dx, dy, dw, dh)将图片的尺寸缩放到320px * 320px，然后再绘制到Canvas上。
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
语法：
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);说明：
参数image、dx、dy、dw、dh表示目标图的横坐标、纵坐标、宽度、高度。
参数sx、sy、sw、sh表示源图需要截取的范围。sx表示被截取部分的横坐标，sy表示被截取部分的纵坐标，sw表示被截取部分的宽度，sh表示被截取部分的高度。
示例：裁剪图片示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>裁减图片示例</title>
</head>
<body>
<canvas
id="canvas"
width="800"
height="800"
style="border: 1px dashed #333333"
></canvas>
<img src="flower-20221202.png" id="pic" style="display: none" />
<script>
window.onload = function () {
// 1、获取 Canvas 对象
var canvas = document.getElementById("canvas");
// 2、获取上下文环境对象
var ctx = canvas.getContext("2d");
// 3、开始绘制图形
var image = document.getElementById("pic");
ctx.drawImage(image, 200, 200, 300, 300, 0, 0, 300, 300);
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
background: black;
align-items: center;
justify-content: center;
}
</style>
</body>
</html>效果图：
说明：
图片裁剪说明如下图：
我们将左侧图片中红色框中的部分绘制到了Canvas (0, 0)位置处。
平铺图片
在Canvas中，我们使用createPattern()方法定义图片的平铺方式。
语法：
var pattern = ctx.createPattern(image, type);
ctx.fillStyle = pattern;
ctx.fillRect();示例：
参数image表示被平铺的图片。
参数type表示平铺的方式，type属性取值如下表：
属性值 | 说明 |
repeat | 默认值，在水平方向和垂直方向同时平铺 |
repeat-x | 在水平方向平铺 |
repeat-y | 在垂直方向同时平铺 |
no-repeat | 只显示一次，不平铺 |
平铺图片示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片操作简单示例</title>
</head>
<body>
<canvas
id="canvas"
width="400"
height="400"
style="border: 1px dashed #333333"
></canvas>
<img src="vip.svg" id="pic" style="display: none;" />
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById("pic");
var pattern = ctx.createPattern(image, 'repeat-x');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 400, 400);
};
</script>
</body>
</html>效果图：
切割图片
以Canvas中，我们使用clip()方法切割图片。
语法：
ctx.clip();说明：
使用clip()方法切割图片的步骤：
(1) 绘制基本图形； (2) 使用clip()方法； (3) 绘制图片。
示例：切割图片示例
示例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片操作简单示例</title>
</head>
<body>
<canvas
id="canvas"
width="800"
height="800"
style="border: 1px dashed #333333"
></canvas>
<img src="flower-20221202.png" id="pic" style="display: none" />
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 第一步：绘制基本图片
ctx.beginPath();
ctx.arc(400, 400, 320, 0, Math.PI, true);
ctx.closePath();
ctx.stroke();
// 第二步：使用clip()方法
ctx.clip();
// 第三步，绘制图片
var image = document.getElementById("pic");
ctx.drawImage(image, 80, 80, 640, 640);
};
</script>
</body>
</html>效果图：
说明：
我们使用半圆作为切割区域切割了图片。
- 上一篇：HTML5 Canvas坐标变换
- 下一篇：这个图片压缩神器，直接可以在前端用
相关推荐
- 10w qps缓存数据库——Redis（redis缓存调优）
-
一、Redis数据库介绍：Redis：非关系型缓存数据库nosql：非关系型数据库没有表，没有表与表之间的关系，更不存在外键存储数据的形式为key：values的形式c语言写的服务（监听端口），用来存...
- Redis系列专题4--Redis配置参数详解
-
本文基于windowsX64，3.2.100版本讲解，不同版本默认配置参数不同在Redis中，Redis的根目录中有一个配置文件（redis.conf，windows下为redis.windows....
- 开源一夏 | 23 张图，4500 字从入门到精通解释 Redis
-
redis是目前出场率最高的NoSQL数据库，同时也是一个开源的数据结构存储系统，在缓存、数据库、消息处理等场景使用的非常多，本文瑞哥就带着大家用一篇文章入门这个强大的开源数据库——Redis。...
- redis的简单与集群搭建（redis建立集群）
-
Redis是什么？是开源免费用c语言编写的单线程高性能的（key-value形式）内存数据库，基于内存运行并支持持久化的nosql数据库作用主要用来做缓存，单不仅仅是做缓存，比如：redis的计数器生...
- 推荐几个好用Redis图形化客户端工具
-
RedisPlushttps://gitee.com/MaxBill/RedisPlusRedisPlus是为Redis可视化管理开发的一款开源免费的桌面客户端软件，支持Windows、Linux...
- 关于Redis在windows上运行及fork函数问题
-
Redis在将数据库进行持久化操作时，需要fork一个进程，但是windows并不支持fork，导致在持久化操作期间，Redis必须阻塞所有的客户端直至持久化操作完成。微软的一些工程师花费时间在解决在...
- 你必须懂的Redis十大应用场景（redis常见应用场景）
-
Redis作为一款高性能的键值存储数据库，在互联网业务中有着广泛的应用。今天，我们就来详细盘点一下Redis的十大常用业务场景，并附上Golang的示例代码和简图，帮助大家更好地理解和应用Redis。...
- 极简Redis配置（redis的配置）
-
一、概述Redis的配置文件位于Redis安装目录下，文件名为redis.conf(Windows名为redis.windows.conf，linux下的是redis.conf)你可以通过C...
- 什么是redis，怎么启动及如何压测
-
从今天起咱们一起来学习一下关于“redis监控与调优”的内容。一、Redis介绍Redis是一种高级key-value数据库。它跟memcached类似，不过数据可以持久化，而且支持的数据类型很丰富。...
- 一款全新Redis UI可视化管理工具，支持WebUI和桌面——P3X Redis UI
-
介绍P3XRedisUI这是一个非常实用的RedisGUI，提供响应式WebUI访问或作为桌面应用程序使用，桌面端是跨平台的，而且完美支持中文界面。Githubhttps://github....
- windows系统的服务器快速部署java项目环境地址
-
1、mysql:https://dev.mysql.com/downloads/mysql/（msi安装包）2、redis:https://github.com/tporadowski/redis/r...
- window11 下 redis 下载与安装（windows安装redis客户端）
-
#热爱编程是一种怎样的体验#window11下redis下载与安装1）各个版本redis下载(windows)https://github.com/MicrosoftArchive/r...
- 一款轻量级的Redis客户端工具，贼好用!
-
使用命令行来操作Redis是一件非常麻烦的事情，我们一般会选用客户端工具来操作Redis。今天给大家分享一款好用的Redis客户端工具TinyRDM，它的界面清新又优雅，希望对大家有所帮助！简介Ti...
- 一个.NET开发且功能强大的Windows远程控制系统
-
我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现！项目介绍SiMayRemoteMonitorOS是一个基于Windows的远程控制系统，完...
- Redis客户端工具详解(4款主流工具)
-
大家好，我是mikechen。Redis是大型架构的基石，也是大厂最爱考察内容，今天就给大家重点详解4款Redis工具@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- resize函数 (64)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- mybatis大于等于 (64)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- skip-name-resolve (63)
- linuxlink (65)
- pythonwget (67)
- logstashinput (65)
- hadoop端口 (65)
- vue阻止冒泡 (67)
- oracle时间戳转换日期 (64)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)