如何在固定的canvas画布内缩放
2016-06-24 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
在固定的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、实现效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-05-12 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
简单思路就是： 禁止浏览器缩放； 处理touch事件，当为两指操作缩放时停止事件传播； canvas方面，始终设置context的原点在canvas元素中心点； 每次触发缩放就clear掉整个画布，然后使用context.scale缩放，然后全部重新画。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-04-25 · 百度知道合伙人官方认证企业
兄弟连教育
兄弟连教育成立于2006年，11年来专注IT职业教育，是国内专业的IT技术培训学校。2016年成功挂牌新三板（股票代码：839467）市值过亿。开设专注程序员培训专注php、Java、UI、云计算、Python、HTML5、
向TA提问
关注
![]()
展开全部
<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属性来控制的
<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属性来控制的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
