|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-3-27 13:37 编辑
<!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>
|
评分
-
| 参与人数 6 | 威望 +205 |
金钱 +410 |
经验 +205 |
收起
理由
|
 执著
| + 15 |
+ 30 |
+ 15 |
很给力! |
 绿叶清舟
| + 30 |
+ 60 |
+ 30 |
赞一个! |
 樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
 朵拉
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|
发表于 2024-3-27 12:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-27 12:11
发表于 2024-3-27 18:12
这也太方便 了。。
