用canvas画布制作首尾衔接图片
位置:
首页 >
代码集锦[ 发布时间: 2024.3.27 作者: 马黑 阅读: 144 ]
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>首尾衔接图片制作</title>
</head>
<body>
<div id="papa" style="margin-top:20px;text-align:center;"></div>
<script>
let oImg = new Image(); /* 创建 Image 对象 */
/* 图片加载事件 ：加载完毕运行花括号内的代码 */
oImg.onload = () => {
/* 创建 canvas 画布 */
let canv = document.createElement('canvas');
canv.style.border = '1px solid gray';
let ww = canv.width = oImg.width * 2; /* 画布宽为图片的两倍 */
let hh = canv.height = oImg.height; /* 画布高度和图片一致 */
console.log(ww);
papa.appendChild(canv); /* 画布追加到 id="papa" 元素 */
let ctx = canv.getContext('2d'); /* 取得画笔 */
/* 第一次绘制图片 ：左半边 */
ctx.drawImage(oImg, 0, 0, ww / 2, hh, 0, 0, ww / 2, hh);
ctx.save(); /* 保存画布状态 */
ctx.translate(ww, 0); /* 移动画布坐标系到X方向末端 ，Y方向不变 */
ctx.scale(-1, 1); /* 左右逆转画布坐标系 */
/* 第二次绘制图片 ：右半边 */
ctx.drawImage(oImg, 0, 0, ww / 2, hh, 0, 0, ww / 2, hh);
ctx.restore(); /* 还原画布状态 */
};
/* 图片地址 ：本地运行可以是本地图片 */
oImg.src = 'https://638183.freep.cn/638183/Pic/fj2.jpg';
</script>
<!--
【附】drawImage() 方法使用说明
第一种方法：需要三个参数(假如 ctx 为画笔操作对象，后同)
ctx.drawImage(img, dx, dy);
参数解释：
① img : 图形对象，如 img 标签、new Image() 对象、video 标签、另一个 canvas 对象等；
② dx : 在画布上放置图形的水平方向起始位置（d 为目标，destination 的缩写，目标指绘制到哪儿）
③ dy : 在画布上放置图形的垂直方向起始位置
此法仅设置开始绘制图形的位置，从该位置开始，带绘制的图片将往右、往下绘制，直至画完图片或画到画布右、下边缘
第二种方法：需要五个参数
ctx.drawImage(img, dx, dy, dw, dh);
参数解释：
① img : 同方法一
② dx : 同方法一
③ dy : 同方法一
④ dw : 在画布上绘制图形的宽度（w 即 width）
⑤ dh : 在画布上绘制图形的高度（h 即 height）
此法考虑绘制图形的位置与宽高，图片将在这个尺寸里完整展示，可能存在伸缩
第三种方法：需要九个参数
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
参数解释：
① img : 同方法一
② sx : 截取图片水平方向的起始位置（s 是 source 源的缩写，图片源之意）
③ sy : 截取图片垂直方向的起始位置
④ sw : 从 sx 起截取图片的宽度
⑤ sy : 从 sy 其截取图片的高度
⑥ dx : (截取的图片区域)绘制在画布上的水平方向起始位置
⑦ dy : (截取的图片区域)绘制在画布上的垂直方向起始位置
⑧ dw : 在画布上绘制(截取的图片区域)的宽度
⑨ dh : 在画布上绘制(截取的图片区域)的高度度
此法既考虑图像源（s*）的裁剪位置和尺寸，又考虑在画布上绘制的位置和绘制宽高（d*），可定制性极强
-->
</body>
</html>
前一篇: Promise处理音频自动播放实例
下一篇: canvas画布圆形进度条播放器
发表评论:
评论列表 [4条]
#4 | 飞飞 于 2024-4-8 12:38 发布: 知名这话很有道理。。大概猜了是谁，又不太敢相信。。回复看着太不像了。。@马黑黑确认一下呗
#3 | 知名不具 于 2024-4-8 08:36 发布: 代码实现的效果，省了图片自己处理的折腾。
#2 | 悄然 于 2024-3-27 18:22 发布: 现在才知道使用方法，生成的图片另存就可以，太方便了
#1 | 飞飞 于 2024-3-27 13:02 发布: 代码制作首尾相接，普通图片可直接使用。不用PS特意处理了。。我还用那个2139的长宽图片试一下，预览完美。。
