将图片画到canvas 上的几种方法

    科技2024-10-27  20

    canvas 画图片 第一种,就是在画布的坐标上,直接将图片画到上面去,此时假如图片大小超出了画布,图片也不缩放

    <canvas id='mycanvas' width="500" height="500"></canvas> <script> window.onload = function(){ var mycanvas = document.getElementById('mycanvas') var ctx = mycanvas.getContext('2d') // 内存中先加载,然后当内存加载完毕时,再把内存中的数据填充到我们的 dom元素中,这样能够快速的去 // 反应,比如网易的图片 var img = new Image(); img.onload = function(){ alert('加载完毕') // 将图片画到canvas上面上去! ctx.drawImage(img,100,100); } img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg"; } </script>

    显示效果 第二种画法!

    // 将图片画到canvas上面上去! // 从100,100 开始画,然后缩放到200,200 ctx.drawImage(img,100,100,200,200);

    明显就能看出效果,这就是缩放的效果

    最后一种画法

    // 将图片画到canvas上面上去! // 从100,100 开始画,然后缩放到200,200 ctx.drawImage(img,593,327,500,500,100,100,300,300); //从图片的593,327 坐标开始截图,截取 500,500 这么大 //然后将截取的图片,从canvas 100,100开始画, 缩放 300,300 这么大!

    原图效果

    Processed: 0.009, SQL: 8