附上源码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>无标题文档</title>
</head>
<body>
<canvas id='myCanvas' width="880" height="634"></canvas>
<script type="text/javascript" src="../../common/js/mui.js" ></script>
<script type="text/javascript">
mui.plusReady(function () {
plus.webview.currentWebview().setStyle({scalable:true});
});
getImg('候经理',80);
var c;
var ctx;
var img;
function getImg(text,fsz){
img = new Image();
img.src = 'map.png';
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
// ctx.clearRect(0,0, 10000, 10000);
//ctx.clearRect(0, 0, c.width, c.height);
img.onload=function(){//图片加载完成，才可处理
ctx.drawImage(img,0,0,880,634,0,0,880,634);
//ctx.save();
ctx.font = fsz+"px Arial";
ctx.textBaseline = 'middle';//更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
ctx.textAlign = 'center';
var tw = ctx.measureText(text).width;
var ftop = c.height/2;
var fleft = c.width/2;
ctx.fillStyle="#ff0000";
ctx.fillRect(fleft-tw/2,ftop-fsz/2,tw,fsz);//矩形在画布居中方式
ctx.fillStyle = '#f40';
// ctx.rotate(Math.PI/12);
ctx.fillRect(100, 100, 300, 400);
ctx.fillStyle="black";
ctx.moveTo(140,130);
ctx.lineTo(370,70);
ctx.lineTo(340,200);
ctx.lineTo(100,240);
ctx.lineTo(140,130);
ctx.fillStyle ="#ff0000";
ctx.fill();
ctx.stroke();
};
function onDraw(ctx,img){
// ctx.clearRect(0,0, 10000, 10000);
//c.height=c.height;
getImg('候经理',80);
// ctx.drawImage(img,0,0,880,634,0,0,880,634);
}
// window.onmousewheel = document.onmousewheel = scrollFnc;
var scale = 1;
function scrollFnc(ev){
var delta = ev.wheelDelta;
if(delta > 0 && scale <= 5){ //滚轮向上
scale += 0.1;
}else if(delta < 0 && scale >= 1){
scale -= 0.2;
}
c.height=c.height;
// var pageWidth = parseInt(c.getAttribute("width"));
// var pageHeight = parseInt(c.getAttribute("height"));
// c.setAttribute("width", pageWidth scale);
// c.setAttribute("height", pageHeight scale);
ctx.scale(scale,scale);
onDraw(ctx,img);
// getImg('候经理',80);
}
// ctx.fillStyle = '#f40';
// ctx.fillRect(100, 100, 300, 300);
}
</script>
</body>
</html>
1 个回复
1***@qq.com (作者)
附上源码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>无标题文档</title>
</head>
<body>
<canvas id='myCanvas' width="880" height="634"></canvas>
<script type="text/javascript" src="../../common/js/mui.js" ></script>
<script type="text/javascript">
mui.plusReady(function () {
plus.webview.currentWebview().setStyle({scalable:true});
});
getImg('候经理',80);
var c;
var ctx;
var img;
function getImg(text,fsz){
img = new Image();
img.src = 'map.png';
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
// ctx.clearRect(0,0, 10000, 10000);
//ctx.clearRect(0, 0, c.width, c.height);
img.onload=function(){//图片加载完成，才可处理
ctx.drawImage(img,0,0,880,634,0,0,880,634);
// ctx.rotate(Math.PI/12);
ctx.fillRect(100, 100, 300, 400);
ctx.fillStyle="black";
};
// ctx.clearRect(0,0, 10000, 10000);
//c.height=c.height;
getImg('候经理',80);
// ctx.drawImage(img,0,0,880,634,0,0,880,634);
}
// window.onmousewheel = document.onmousewheel = scrollFnc;
// var pageWidth = parseInt(c.getAttribute("width"));
// var pageHeight = parseInt(c.getAttribute("height"));
// c.setAttribute("width", pageWidth scale);
// c.setAttribute("height", pageHeight scale);
// getImg('候经理',80);
}
// ctx.fillStyle = '#f40';
// ctx.fillRect(100, 100, 300, 300);
}
</script>
</body>
</html>