canvas画图IPAD上画不出来。
在PC端可以画出图片，在ipad上用微信内置浏览器和safari 都画不出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
display: block;
position: absolute;
left: -1000px;
}
</style>
</head>
<body>
<img src="images/test.jpg" id="myimg">
<canvas id="mycan" width="320" height="300"></canvas>
<script>
var img=document.getElementById("myimg");
var can=document.getElementById("mycan");
img.onload=function(){
var c=can.getContext("2d");
c.beginPath();
c.fillStyle="#999";
c.fillRect(0,0,320,300);
c.drawImage(img,0,0,320,300,0,0,320,300);
c.closePath();
}
</script>
</body>
</html>
天者VS地者
9 years, 4 months ago
Answers
我自己也试了下。pad上你应该是拿Safari打开的吧，我电脑上Safari打开也看不到图片。应该是Safari和Chrome在实现drawImage上的差异造成了。
当使用7个参数的时候，第2，3，4，5参数联合起来表示对图像的剪裁区域。我测试下来的结果是，如果这个区域超出了图像原来的大小区域，则safari下不绘制，而chrome下会将超出的区域绘制成透明。
你这张图的原始大小（img,natureWidth, img,naturalHeight）是200*200，而期望绘制的是320-0, 300-0，超出其范围。设为200，200应该就可以了。
参考： http://stackoverflow.com/questions/29633355/canvas-context-drawimage-differences-across-browsers
嗶哩哩嗶哩
answered 9 years, 4 months ago
@ygjack
按照你说的方法进行了test， PC依然是PC端正常。pad上无图。代码执行了，alert在pad上也有弹出。代码如下：
<body>
<canvas id="mycan" width="320" height="300"></canvas>
<!-- <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" id="myimg"> -->
<script>
var can=document.getElementById("mycan");
var c=can.getContext("2d");
var img=new Image();
c.beginPath();
c.fillStyle="#999";
c.fillRect(0,0,320,300);
img.onload=function(){
c.drawImage(img,0,0,320,300,0,0,320,300);
c.closePath();
alert("hello");
}
img.src="http://img.mukewang.com/52b4113500018cf102000200.jpg";
</script>
</body>
麦田裸奔者
answered 9 years, 4 months ago