使用same ()和scale()缩放画布图像，但使用javascript获取与原始画布图像相同的x和y坐标 - 腾讯云开发者社区

; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., y 坐标 , 同时可以计算出当前位置对应的图片中的水平方向的比例和垂直方向的比例 ; 在缩放后的图片中 , 只要保证鼠标指针指向相同的 x, y 坐标时 , 该位置对应的水平方向的比例和..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...记录的是鼠标指针指向的界面中 Camvas 画布中的坐标位置 ; pointer_ratio_x 和 pointer_ratio_y 记录的是鼠标指针指向位置对应图片中坐标位置的比例 ; public...(null) * scale; // 缩放后的图像高度有了鼠标指针在图片中的位置 , 图片的尺寸 , 就可以计算出鼠标指针在图片中的比例 ; // 计算比例 pointer_ratio_x

2.8K1 0

canvas 处理图像（上）

❞ 将图像加载到画布中实际上与绘制图像一样简单——只涉及一个方法。在调用drawImage方法时，至少需要三个参数：所绘制的图像和图像绘制位置的(x, y)坐标。...❞ 首先，让我们使用与 HTML 文件位于相同目录的一个图像，将一个HTML img元素绘制到画布中。...drawImage方法的参数就是刚刚创建的图像对象，以及绘制图像的原点(x, y)坐标值。如果一切正常，我们就能够将图像绘制到画布上，尽管图像可能被剪掉一部分。...调整和裁剪图像我们现在知道调用drawImage方法的第一种方式，即将完整尺寸的图像绘制到画布上，但超过画布边界的部分被剪掉了。为了解决这个问题，需要调整图像大小或者控制图像的裁剪。...裁剪是drawImage方法的最后一种用法，它总共有9个参数：源图像、源图像的裁剪区原点坐标(x, y)、源图像的裁剪区宽度和高度、在画布（目标)上绘制图像的原点坐标(x, y)及在画布上绘制图像的宽度和高度

2.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布（下）

x 在画布上放置图像的 x 坐标位置。 y 在画布上放置图像的 y 坐标位置。...w,h) 在画布上定位图像，并规定图像的宽度和高度 img 规定要使用的图像、画布或视频。...x 在画布上放置图像的 x 坐标位置。 y 在画布上放置图像的 y 坐标位置。 w 要使用的图像的宽度。（伸展或缩小图像） h 要使用的图像的高度。...sx 开始剪切的 x 坐标位置。 sy 开始剪切的 y 坐标位置。 sw 被剪切图像的宽度。 sh 被剪切图像的高度。 x 在画布上放置图像的 x 坐标位置。 y 在画布上放置图像的 y 坐标位置。...图像绘制到目标（已有）的图像上裁切 clip() 从原始画布中剪切任意形状和尺寸案例从画布中剪切 200*120 像素的矩形区域。

1.3K7 0

JavaScript 编程精解中文第三版十七、在画布上绘图

该矩形宽 100 像素，高 50 像素，它的左上点坐标为(10,10)。与 HTML（或者 SVG）相同，画布使用的坐标系统将(0,0)放置在左上角，并且y轴向下增长。...我们也可以描边，也就是沿着图形的边沿画出线段。SVG 也使用了相同的技术。 fillRect方法可以填充一个矩形。他的输入为矩形框左上角的第一个x和y坐标，然后是它的宽和高。...第二个到第五个参数表示需要拷贝的源图片中的矩形区域（x，y坐标，宽度和高度），同时第六个到第九个参数给出了需要拷贝到的目标矩形的位置（在画布上）。...当水平缩放 –1 时，在x坐标为 100 的位置画出的图形会绘制在缩放之前x坐标为 –100 的位置。...为了避免这个问题，我们还需要调整传递给drawImage的坐标，将绘制图形的x坐标改为 –50 而不是 0。另一个解决方案是在缩放时调整坐标轴，这样代码就不需要知道整个画布的缩放的改变。

3.8K3 0

前端canvas基础复习，canvas学习笔记，持续记录

Canvas基础 1.介绍 Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。...该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。...） scale() 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。...(a (水平缩放,垂直倾斜,水平倾斜,垂直缩放,水平移动,垂直移动); //getTransform() 方法获取当前被应用到上下文的转换矩阵,返回一个 DOMMatrix 对象坐标点位置判断 1.... //普通 drawImage(image,x,y); //缩放 drawImage(image,x,y,width,height); // 切片，图像指定一部分到画布指定位置 drawImage(image

2.4K4 0

【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )

JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在【Java AWT 图形界面编程】使用鼠标滚轮放大缩小...Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如缩小画布后 , 移动鼠标..., 移动距离对应的缩放效果也随之缩小 ; 在【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener...| Canvas 中绘制图像并设置图像大小 ) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果，并同时福袋鼠标指针拖拽效果 ; 本博客中实现的案例 , 在上面的基础上 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点...*/ public void save(int x, int y){ // 记录鼠标坐标 pointer_x = x; pointer_y

1.8K2 0

canvas离屏技术与放大镜实现

为了方便讲解，本文分为 2 个应用部分：实现水印和中心缩放实现放大镜专注前端与算法的系列干货分享，转载请声明出处：原文链接: xxoo521.com 什么是离屏技术？...实现水印和中心缩放在代码中，有两个 canvas 标签。分别是可见与不可见。不可见的 canvas 对象上的 Context 对象，就是我们放置图像水印的地方。...* scale, height = img.height * scale; // (dx, dy): 画布上绘制img的起始坐标...保存后的图像，就有已经有了水印，如下图所示：实现放大镜在上述中心缩放的基础上，实现放大镜主需要注意以下 2 个部分：细化处理canvas的鼠标响应事件：滑入、滑出、点击和松开重新计算离屏坐标（...* @param {Number} x 鼠标的屏幕坐标x * @param {Number} y 鼠标的屏幕坐标y */

1.3K1 0

canvas的api总结

简介 Canvas是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。...beginPath() 起始（重置）当前路径 moveTo( x, y ) 将笔触移动到指定的坐标(x,y) lineTo( x, y ) 绘制一条从当前位置到指定的坐标(x,y)的直线...clip() 从原始画布剪切任意形状和尺寸的区域 quadraticCurveTo() 创建二次贝塞尔曲线 bezierCurveTo() 创建三次贝塞尔曲线 arc( x, y...设置或返回在绘制文本时使用的当前文本基线 fillText( text, x, y ) 在画布上绘制“被填充”的文本 strokeText( text, x, y ) 在画布上绘制文本（无填充）...scale( x, y ) 缩放当前绘图 translate( x, y ) 重新设置画布上的(0,0)位置 rotate( angle ) 选择当前绘图，单位为“弧度”，角度转弧度公式（ degrees

1.6K1 1

HTML5(六)——Canvas 高级操作

1.1 、scale - 缩放使用语法：scale(x,y) x：表示水平方向的缩放倍数 y：表示垂直方向的缩放倍数 eg：canvas 绘制的矩形框放大两倍，代码如下： var canvas = document.getElementById...) 1.2、translate - 画布平移使用语法：translate(x,y) x：添加到水平坐标上的位置 y：添加到垂直坐标上的位置设置之后开始绘制的图片位置从(x,y)算起。...开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sheight 可选。被剪切图像的高度。 x 在画布上放置图像的 x 坐标位置。...y 在画布上放置图像的 y 坐标位置。 width 可选。要使用的图像的宽度。（伸展或缩小图像） height 可选。要使用的图像的高度。...x ImageData 对象左上角的 x 坐标，以像素计。 y ImageData 对象左上角的 y 坐标，以像素计。 dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。

1.2K3 0

HTML5(六)——Canvas 高级操作

1.3K3 0

第157天：canvas基础知识详解

）（重点） 2.6.1 基本绘制图片的方式 2.6.2 在画布上绘制图像，并规定图像的宽度和高度 2.6.3 图片裁剪，并在画布上定位被剪切的部分 2.6.4 用JavaScript创建img...canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...font 属性使用的语法与 CSS font 属性相同。...2.6.2 在画布上绘制图像，并规定图像的宽度和高度 context.drawImage(img,x,y,width,height); 参数说明：width 绘制图片的宽度， height：绘制图片的高度...ctx.restore() 返回之前保存过的路径状态和属性获取最近缓存的ctx 一般配合位移画布使用。

5.1K2 2

熬夜总结了 “HTML5画布” 的知识点（共10条）

设置width和height的区别 HTML和JavaScript设置的画布大小 css设置的是画布缩放后的大小坐标系原点及方向（原点在左上角，向右为x方向，向下为y方向）画直线，矩形和原型画直线...sourceX 开始剪切的x坐标位置 sourceY 开始剪切的y坐标位置 sourceWidth 被剪切图像的宽度 sourceHeight 被剪切图像的高度 destX 在画布上放置图像的 x 坐标位置...destY 在画布上放置图像的 y 坐标位置 destWidth 要使用的图像的宽度 destHeight 要使用的图像的高度插入图像： function Draw() { // 获取canvas...,w1,h1 画布中的一个矩形区域坐标变换平移移动画布的原点 translate(x,y) 参数表示移动目标点的坐标缩放 scale(x,y) 参数表示宽高的缩放比例旋转...scale() 缩放当前绘图变大或变小 rotate() 旋转当前绘图 translate() 重新映射画布的(0,0)位置 6.使用图像使用三种方法插入图像 function draw() {

7.6K1 0

熬夜总结了 “HTML5画布” 的知识点（共10条）

Canvas坐标体系 canvas默认大小，300*150 通过HTML，css，JavaScript设置width和height的区别 HTML和JavaScript设置的画布大小 css设置的是画布缩放后的大小...中的图形变换图形变换都是针对坐标系来说的：平移：ctx.translate(x,y) 旋转：ctx.rotate(rad) 缩放：ctx.scale(x,y) save和restore 用来保存和恢复上下文的环境...destY 在画布上放置图像的 y 坐标位置 destWidth 要使用的图像的宽度 destHeight 要使用的图像的高度插入图像： ?...平移移动画布的原点 translate(x,y) 参数表示移动目标点的坐标缩放 scale(x,y) 参数表示宽高的缩放比例旋转 rotate(angle) 参数表示旋转角度 5.使用路径 lineTo...scale() 缩放当前绘图变大或变小 rotate() 旋转当前绘图 translate() 重新映射画布的(0,0)位置 6.使用图像使用三种方法插入图像 function draw() {

7.1K2 1

带你领略 html2canvas

useCORS false 是否尝试使用CORS从服务器加载图像 width Element width 画布的宽度 height Element height “画布”的高度 x Element x-offset...作物画布坐标 y Element y-offset 作物画布坐标 scrollX Element scrollX 渲染元素时使用的x轴位置(例如，如果元素使用“position: fixed”) scrollY...Element scrollY 呈现元素时使用的y轴位置(例如，如果元素使用“position: fixed”) windowWidth `Window.innerWidth 当渲染“元素”时使用的窗口宽度...原理就是讲canvas画布的width和height放大两倍。...支持小数 canvas.width = width * scale; //定义canvas 宽度 * 缩放 canvas.height = height * scale; //定义canvas高度 *缩放

1.8K1 1

JAVA通过BufferedImage进行图片的绘制，缩放，裁剪，水印等操作

参数取值为以下之一（Image 类中的常量）: * SCALE_AREA_AVERAGING: 使用 Area Averaging 图像缩放算法; * SCALE_DEFAULT:...使用默认的图像缩放算法; * SCALE_SMOOTH: 选择图像平滑度比缩放速度具有更高优先级的图像缩放算法。...图像等比缩放 * @param srcImageFile 缩放的图片 * @param destImageFile 缩放后的图片 * @param scale 缩放比例...* @param srcImageFile 需要裁剪的图片 * @param x 裁剪时x的坐标（左上角） * @param y 裁剪时y的坐标（左上角...path.moveTo(192, 18); //添加一个弯曲段，由两个新定义的点，通过绘制一条二次曲线相交的当前坐标和指定的坐标 (x2,y2)的路径，使用指定的点 (x1,y1)作为二次参考 path.quadTo

13.1K3 1

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。、浏览器支持情况如下： ?...练习：画一个100X100的正方形在画布正中央 1.2、画线 context.moveTo(x,y) 把画笔移动到x,y坐标，建立新的子路径。...1.5、绘制图像 context.drawImage(image,x,y) 把image图像绘制到画布上x,y坐标位置。...context.drawImage(image,x,y,w,h) 把image图像绘制到画布上x,y坐标位置，图像的宽度是w,高度是h。...特点： 1．任意放缩用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。 2．文本独立 SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。

9.6K10 0

Canvas入门到高级详解(中)

ctx.fill(); 案例 15 背景图填充.html 3.3 变换（重点） 3.3.1 缩放（重点） scale() 方法缩放当前绘图，更大或更小语法：context.scale(scalewidth...案例 16 缩放案例.html 3.3.2 位移画布（重点） ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置参数说明： x：添加到水平坐标（x）上的值 y：...位移画布一般配合缩放和旋转等。...ctx.restore() 返回之前保存过的路径状态和属性获取最近缓存的 ctx 一般配合位移画布使用。...3.5 画布限定区域绘制（了解） ctx.clip(); 方法从原始画布中剪切任意形状和尺寸一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）一般配合绘制环境的保存和还原

1.9K3 1

简单的canvas绘图

anvas 本身并没有绘制能力（它仅仅是图形的容器），是一块无色透明的区域，就像一个可以设置宽度高度没有背景的DIV一样，你必须使用JavaScript脚本来完成在其中的绘图任务。...二.基本用法（使用 JavaScript 来绘制图像）：创建 context 对象(getContext("2d") 对象是内建的 HTML5 对象 var c=document.getElementById...fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 x,y : 初始坐标 width,height : 矩形的宽高 ?...y,r,start,end,true/false)方法创建弧/曲线（用于创建圆或部分圆） x ：圆中心的x坐标 y ：圆中心的y坐标 r ：圆的半径 start ：起始角，以弧度计（弧的圆形的三点钟位置是...arcTo() 创建两切线之间的弧/曲线。 5.转换 scale() 缩放当前绘图至更大或更小。

2.3K2 0

Canvas 从进阶到退学

缩放画布用到的方法是 scale(x, y) ，接收2个参数，第一个参数是x轴方向的缩放，第二个参数是y轴方向的缩放。...虽然说是副作用，但也很容易理解，整块画布缩放了，对应的坐标比例其实也跟着缩放嘛。...imageData: 规定要放回画布的 ImageData 对象 x: ImageData 对象左上角的 x 坐标，以像素计 y: ImageData 对象左上角的 y 坐标，以像素计 dirtyX:...水平值（x），以像素计，在画布上放置图像的位置 dirtyY: 可选。水平值（y），以像素计，在画布上放置图像的位置 dirtyWidth: 可选。...在画布上绘制图像所使用的宽度 dirtyHeight: 可选。

2.1K2 1

Canvas简单入门

别急，这是因为我们只是设置了填充和描边而已，想要它生效，还需要绘制出来才能有效果。绘制矩形与绘制矩形相关的方法有三个。它们都接收 4 个参数：矩形 x 坐标、矩形 y 坐标、矩形宽度和矩形高度。...rotate(a)：围绕原点把图像旋转 a 弧度 scale(x, y)：缩放图像 translate(x, y)：移动原点 const mycanvas = document.getElementById...，但画布没那么大。...; }; 还可以接收 9 个参数，实现把原始图像的一部分绘制到画布上。...接收 6 个参数，前 3 个参数指定起点圆形中心的 x 坐标、y 坐标和半径，后 3 个参数指定终点圆形中心的 x 坐标和半径。

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )

canvas 处理图像（上）

Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布（下）

JavaScript 编程精解中文第三版十七、在画布上绘图

前端canvas基础复习，canvas学习笔记，持续记录

【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )

canvas离屏技术与放大镜实现

canvas的api总结

HTML5(六)——Canvas 高级操作

HTML5(六)——Canvas 高级操作

第157天：canvas基础知识详解

熬夜总结了 “HTML5画布” 的知识点（共10条）

熬夜总结了 “HTML5画布” 的知识点（共10条）

带你领略 html2canvas

JAVA通过BufferedImage进行图片的绘制，缩放，裁剪，水印等操作

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

Canvas入门到高级详解(中)

简单的canvas绘图

Canvas 从进阶到退学

Canvas简单入门

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐