canvas 图片缩放-JS中canvas画布绘制中如何实现缩放，位移，旋转

设置了禁用插值。canvas是一款业内非常著名的ACD公司推出的一款顶级的矢量绘图软件,canvas中图片缩放禁用是因为设置了禁用插值,重新设置即可。canvas能够无缝集成用于绘画、图像编辑和Web设计的等工具,软件能够以多种的格式导出绘画作品。

(2,2);

缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。

(x,y) 方法重新映射画布上的 (0,0) 位置

x: 添加到水平坐标(x)上的值

y: 添加到垂直坐标(y)上的值

发生

位移

后,相当于把画布的0,0坐标 更换到新的x,y的位置,所有绘制的新元素都被影响。

位移画布一般配合缩放和旋转等。

(angle); 方法旋转当前的绘图

注意参数是弧度(PI)

如需将角度转换为弧度,请使用 degrees* 公式进行计算。

如何在固定的canvas画布内缩放

<script type='text/javascript' src=></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; 判断是否是一只手指按住萤幕

('touchstart',_touchstart);

('touchmove',_touchmove);

('touchend',_touchend);

function _touchstart(e){

isstart = true;

isonefinger = true;

if(pretevent){

e.sPropagation();

}

var ttime = (new Date()).getTime();

var touch;

if(typeof e.clientX != 'undefined'){

touch = e;

}else{

touch = e.[0];

if(e. && e. > 1){

isonefinger = false;

}

}

startX = ;

startY = ;

if(!isonefinger){

var touch1 = e.[1];

var x = ;

var y = ;

startLen = ((startX - x,2) + (startY - y,2));

}

if(!isonefinger){

touchstarttime = ttime;

}

}

function _touchmove(e){

var touch;

var jq0 = $(this);

jq0.s(true,true);

if(typeof e.clientX !='undefined'){

touch=e;

}else{

touch= e.[0];

}

var x = ;

var y = ;

var zoom = (0).;

if(zoom == 0) zoom = 1;

if(!isonefinger){

var touch1 = e.[1];

var x1 = ;

var y1 = ;

var nowlen = ((x1 - x,2) + (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;

}

({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属性来控制的

简单思路就是:

禁止浏览器缩放;

处理touch事件,当为两指操作缩放时停止事件传播;

canvas方面,始终设定context的原点在canvas元素中心点;

每次触发缩放就clear掉整个画布,然后使用缩放,然后全部重新画。