电子商务网站建设公司网站图片像素

电子商务网站建设公司,网站图片像素,wordpress更改固定链接后无法登陆,在线网页代理网址项目中有一个点击图片#xff0c;在点击区域画圆标注的需求#xff0c;需要知道点击的位置#xff0c;并判断位置是否正确#xff0c;类似“找不同”小游戏。这种就需要用到canvas了基本说明canvas 是 一个 HTML 元素#xff0c;用于绘制图形和图像#xff0c;通过 JavaS…项目中有一个点击图片在点击区域画圆标注的需求需要知道点击的位置并判断位置是否正确类似“找不同”小游戏。这种就需要用到canvas了基本说明canvas是 一个 HTML 元素用于绘制图形和图像通过 JavaScript 来控制其行为。img元素是用来在网页中显示图像的 HTML 元素。drawImage()方法是Canvas 提供的一种方法用于将图像、视频或另一个 canvas 的内容绘制到当前 canvas 上。canvas 与 img 元素的结合可以实现动态图像处理包括但不限于图像裁剪、缩放、旋转等。实现方法最简单的方式是直接使用drawImage方法来绘制img元素的内容到 Canvas 上。需要注意的是在使用drawImage之前必须等待img元素加载完成。template div canvas idmyCanvas/canvas /div /template script setup langts import { onMounted } from vue; const draw () { // 创建 canvas 元素 const canvas:any document.getElementById(myCanvas); const ctx canvas.getContext(2d, { willReadFrequently: true, }); // 创建 img 元素 const img new Image(); img.src /src/assets/pro.png; // 图片加载完成后绘制到 canvas img.onload () { canvas.width img.width; canvas.height img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 也可以省略后两个参数默认画满 // ctx.drawImage(img, 0, 0); }; canvas.addEventListener(click, (e:any) { const x e.clientX; const y e.clientY; console.log(点击的位置, x, y); // 点击的位置画出圆形 ctx.beginPath(); ctx.strokeStyle #0f0; ctx.lineWidth 5; ctx.arc(x, y - 50, 50, 0, 360); ctx.stroke(); }) } onMounted(() { draw() }); /script效果如图注意img.src会把图片路径加载为绝对路径如果直接使用相对路径的话会找不到图片资源要使用require引入相对路径img.src /assets/pro.png 加载失败img.src require(/assets/pro.png) 加载成功或者 可以把图片放在public文件夹下直接引入img.src pro.png;若使用在线的图片可能会有跨域问题设置 img.crossOriginimg.crossOrigin ; //解决图片跨域问题img.src https://imgs.699pic.com/images/401/061/200.png!detail.oblique.v1;其他功能1. 使用drawImage绘制并裁剪图像img.onload () { canvas.width img.width; canvas.height img.height; // 指定裁剪区域 x, y, width, height以及目标绘制位置 dx, dy, dWidth, dHeight // (img, x, y, width, height, dx, dy, dWidth, dHeight) ctx.drawImage(img, 100, 100, 200, 200, 0, 0, canvas.width, canvas.height); };代码解释定义裁剪区域(100, 100, 200, 200)表示从原图像的(100, 100)开始裁剪裁剪区域宽高分别为200像素。指定了目标绘制位置(0, 0)以及绘制区域的宽高canvas.width和canvas.height。裁剪如图2. 使用drawImage绘制图像并做其他变换除了裁剪之外我们还可以利用transform方法来改变图像的位置、大小和方向。这里我们将展示如何旋转图像。img.onload () { canvas.width img.width; canvas.height img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 保存当前的绘图状态 ctx.save(); // 设置转换中心点 ctx.translate(canvas.width / 2, canvas.height / 2); // 旋转 45 度角 ctx.rotate(Math.PI / 4); // Math.PI / 4 45deg // 绘制图像 ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height); // 恢复之前的绘图状态 ctx.restore(); };代码解释使用 translate 方法将坐标系原点移动到画布的中心。使用 rotate 方法旋转坐标系。使用 drawImage 方法绘制图像通过减去图像的一半宽度和高度来确保图像绘制在新的坐标系原点上。使用 save 和 restore 方法来保存和恢复绘图状态避免影响后续的绘图操作。旋转如图