极客观点
项目管理
HarmonyOS
在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>
我自己也试了下。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