bob体育官方平台
Canvas入门(3):图像处理和绘制文字

探问那些! 假诺图像数据是不易的,能够获得高宽 但若是是随意选用任何非web图像文件,则取不到高宽 须求看清当前的selected文件是还是不是为图像?

来源:

[Ctrl+A 全选 注:如需引进外界Js需刷新才具举行]

风华正茂、图像管理(非特别表达,全部结果均出自最新版Google卡塔尔(قطر‎

在HTML 5中,不只好够使用Canvas API绘制图形,也足以用来拍卖互联网或磁盘中的图像文件,然后绘制在画布中。绘制图像时,要求利用drawImage(卡塔尔国方法:

drawImage(image,x,y卡塔尔(قطر‎:image是图像援引,x,y是绘制图像时在画布中的起初地方

drawImage(image,x,y,w,h卡塔尔国:前四个同上,w,h是绘制时图像的宽窄和惊人,能够用于缩放图像

drawImage(image,sx,sy,sw,sh,dx,dy,dw.dh卡塔尔: 将画布中早已绘制好的图像的上上下下照旧有个别复制到画布的另一个地点。sx,sy,sw,sh分别是原图中被复制区域的苗子地点宽高,dx,dy,dw,dh 表示复制后图像在画布中的发轫位置和高宽。

   1: // 获取canvas 的ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 获取上下文

   8:     var context = canvas.getContext('2d');

   9:     context.fillStyle = '#eeeeff';

  10:     context.fillRect(0,0,400,300);

  11:     var image = new Image();

12: image.src = ‘my.jpg’;

返回顶部