如何在固定的canvas画布内缩放
发布网友
发布时间：2022-04-27 02:35
共4个回答
懂视网
时间：2022-04-20 02:56
// 对图片进行压缩
function compress(imgPath) {
var image = new Image();
//新建一个img标签（还没嵌入DOM节点)
image.src = imgPath;
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var imageWidth = image.width / 3;
//压缩后图片的大小
var imageHeight = image.height / 3;
var data = '';
canvas.width = imageWidth;
canvas.height = imageHeight;
context.drawImage(image, 0, 0, imageWidth, imageHeight);
data = canvas.toDataURL('image/jpeg')
//压缩完成
$(".srcDiscernImg").attr("src", data);
console.log("渲染。。。。");
}
}本篇文章到这里就已经全部结束了，更多精彩内容大家可以关注PHP中文网的HTML5视频教程栏目！！！
热心网友
时间：2022-04-20 00:04
在固定的canvas画布内缩放的实现：
1、思路：限定canvas的范围，获取到2d句柄后，可以调用scale方法进行缩放。
2、完整代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
</script>
</body>
</html>
3、实现效果
热心网友
时间：2022-04-20 01:22
简单思路就是： 禁止浏览器缩放； 处理touch事件，当为两指操作缩放时停止事件传播； canvas方面，始终设置context的原点在canvas元素中心点； 每次触发缩放就clear掉整个画布，然后使用context.scale缩放，然后全部重新画。
热心网友
时间：2022-04-20 02:57
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript'>
function bindchangesize(jq){
var touchstarttime = 0; //记录手指按住屏幕的时间
var dbx = 0;
var dby = 0;
var pretevent = false;
var startX; //按住时坐标X
var startY; //按住时坐标Y
var startLen;
var isstart = false;
var isonefinger = true; //判断是否是一只手指按住屏幕
jq.bind('touchstart',_touchstart);
jq.bind('touchmove',_touchmove);
jq.bind('touchend',_touchend);
function _touchstart(e){
isstart = true;
isonefinger = true;
if(pretevent){
e.stopPropagation();
}
var ttime = (new Date()).getTime();
var touch;
if(typeof e.clientX != 'undefined'){
touch = e;
}else{
touch = e.originalEvent.touches[0];
if(e.originalEvent.touches && e.originalEvent.touches.length > 1){
isonefinger = false;
}
}
startX = touch.clientX;
startY = touch.clientY;
if(!isonefinger){
var touch1 = e.originalEvent.touches[1];
var x = touch1.clientX;
var y = touch1.clientY;
startLen = Math.sqrt(Math.pow(startX - x,2) + Math.pow(startY - y,2));
}
if(!isonefinger){
touchstarttime = ttime;
}
}
function _touchmove(e){
var touch;
var jq0 = $(this);
jq0.stop(true,true);
if(typeof e.clientX !='undefined'){
touch=e;
}else{
touch= e.originalEvent.touches[0];
}
var x = touch.clientX;
var y = touch.clientY;
var zoom = jq0.get(0).style.zoom;
if(zoom == 0) zoom = 1;
if(!isonefinger){
var touch1 = e.originalEvent.touches[1];
var x1 = touch1.clientX;
var y1 = touch1.clientY;
var nowlen = Math.sqrt(Math.pow(x1 - x,2) + Math.pow(y1 - y,2));
var len = nowlen - startLen;
if(len < 0){
len = nowlen;
}else{
len = startLen + len;
}
var percent = len/startLen;
var changezoom = zoom*percent;
if(changezoom>5){
changezoom = 5;
}
if(changezoom<0.5){
changezoom = 0.5;
}
jq0.animate({zoom:changezoom});
}
}
function _touchend(e){
startX = null;
startY = null;
isstart = false;
isonefinger=true;
startLen = 0;
}
}
function bindevent(){
var jqcanvas1 = $('#canvasid'); //通过ID找到canvas
bindchangesize(jqcanvas1);
}
</script>
简单的写了一个，你试试
通过zoom属性来控制的
