html5版本水平移动效果怎么实现_随笔

　对 SVG 图进行缩放和平移的最简单方法是使用浏览器自带的缩放和滚动功能。在 Internet Explorer 9 中，下表描述了与缩放相关的鼠标和键盘快捷方式。用户 *** 作键盘快捷键鼠标快捷键放...

设置 Viewport

<head>

</head>

什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

说下思路在给个简单的代码. 首先先画好线. 要平移实际上是将线重新画一次不是直接一个translate就好了的.再次你要理解save和restore()方法 code

var canvas=document.getElementById("canvas")

var ctx = canvas.getContext("2d")

function lines(ctx){

ctx.beginPath()

ctx.moveTo(10,10)

ctx.lineTo(30,50)

ctx.lineTo(50,70)

ctx.lineTo(120,190)

ctx.stroke()

}

lines(ctx)

document.getElementById("canvas").addEventListener("click",function(){

ctx.save()

ctx.clearRect(0,0,700,550)

ctx.translate(50,50)

lines(ctx)

ctx.restore()

},false)

</script>

欢迎分享，转载请注明来源：内存溢出

html5版本水平移动效果怎么实现