A)让伺,服,器代为读取这些外部资源,使它们变成同网域的资料。
B)用 JS 建立 img,将其 crossOrigin 特性设成 *anonymous*,再请求 SVG。如果对方的伺,服,器有明确允许(有设定正确的 Access-Control-Allow-Origin),并且该 SVG 没有引用任何外部资源,并且浏览器支援,那麼载入后你可以用 JS 存取其内部资料。
在固定的canvas画布内缩放:
<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>
首先canvas和SVG不是对立的,应用场景不同,各有各的用处.svg可缩放矢量图形常用在地图和矢量图标制作等,不会因为放大缩小而失真。
canvas是基于js的绘图标签常用于网页游戏的制作如js的飞机大战,也可以用来做网页的刮奖等。