Canvas图像的放大缩小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>放大</title><script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script></head>
<body>
<input type="button" value="放大" id="Bigger"><br>
<input type="button" value="缩小" id="Smaller"><br>
<canvas id="canvas" height="1050" width="1500"></canvas><script>let add = document.getElementById("Bigger");let release = document.getElementById("Smaller");let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");let initScale = 1; //缩放倍数 1为默认值let image = new Image();var isMouseDown = false; //是否处于拖动状态window.onload = () => {_initCanvasImg();image.onload = () => {dramImageByScale(1);};};//页面加载成功初始化function _initCanvasImg() {// 拿到图片地址image.src="layer/_alllayers/L00/R00001b30/C00001219.png";}function dramImageByScale(scale) {let imgWidth = image.width;let imgHeight = image.height;canvas.width = imgWidth;canvas.height = imgHeight;var width = imgWidth * scale;var height = imgHeight * scale;var sx = canvas.width / 2 - width / 2; //x坐标var sy = canvas.height / 2 - height / 2; //y坐标context.clearRect(0, 0, canvas.width, canvas.height);//drawImage 方法在画布上绘制图像、画布或视频。//绘制的内容、坐标 被剪切的宽高context.drawImage(image, sx, sy, width, height);console.log(sx);console.log(sy);}add.onclick = () => {initScale += 0.1;console.log(initScale);dramImageByScale(initScale);};release.onclick = () => {initScale -= 0.1;console.log(initScale);dramImageByScale(initScale);};
</script>
</body>
</html>

Canvas图像的放大缩小相关推荐

【QT】QT从零入门教程(七)：鼠标滚轮实现图像的放大缩小
鼠标滚轮实现图像放大缩小的主要思想:通过wheelEvent来获得鼠标滚轮的angleDelta,即滚轮转角.然后通过数据类型转换,将读取的值转换成整型数值叠加到图像的尺寸长和宽上,从而实现图像的放大 ...
canvas 实现图片放大缩小拖拽移动端、PC端
前言实现目标:使用canvas画出地图,且可以通过鼠标滚轮缩放,拖拽:手指滑动拖拽,手势缩放 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dW ...
vue canvas 拖拽放大缩小
<template><div ref="tagcanvasbox" class="tagcanvasbox"><canvas re ...
canvas图像绘制（图像放大、缩小、拖动和截图）
林大大又来更新啦~ 这次主要做的是关于canvas图像绘制的部分,要实现的功能主要是绘制.对canvas的放大,缩小,拖动以及截图本篇重点:图像的截图所使用的矩形框是怎么画出来的呢?想使用的童鞋参考 ...
基于Vue Konva的canvas图片放大缩小
最近一个项目要实现图片根据鼠标位置多级放大缩小的功能,在网上找了好久的资源没有找到,偶然看到了一篇文章,但是没有完整的代码,研究了两天把代码补全了,其实也不难,但是困扰了我好几天,这个方法相对于网上别 ...
Python matplotlib绘图，使用鼠标滚轮放大/缩小图像
思路: 使用fig.canvas.mpl_connect()函数来绑定相关fig的滚轮事件利用事件event的inaxes属性获取当前鼠标所在坐标系ax 使用get_xlim()函数获取坐标系ax的 ...
canvas整体放大_Canvas实现图片放大缩小移动操作
对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...
matplotlib 鼠标拖动坐标图像/鼠标滑轮放大缩小坐标图像
分享一下关于matplotlib 鼠标拖动坐标图像/鼠标滑轮放大缩小坐标图像的代码先看效果: 1.鼠标左键拖动坐标图像 # 鼠标左键拖拽事件 self.lastx = 0 # 获取鼠标按下时的坐标X ...
HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放旋转裁剪图片 Image Cropper ...

Canvas图像的放大缩小

Canvas图像的放大缩小相关推荐

最新文章

热门文章