|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 |
赞一个! |
查看全部评分
|