HTML5 Canvas之图片引用解析

你猜 阅读:211 2021-03-31 23:03:33 评论:0


图片应用的方式

1. 引用页面内的图片

  我们可以通过 document.images 集合、document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片(如果已知图片元素的 ID。

2. 由零开始创建图像

var img = new Image();   // Create new Image object   
img.src = 'myImage.png'; // Set source path 

  当脚本执行后,图片开始装载。若调用 drawImage 时,图片没装载完,脚本会等待直至装载完毕。如果不希望这样,可以使用 onload 事件:

var img = new Image();   // Create new Image object   
img.onload = function(){   
  // execute drawImage statements here   
}   
img.src = 'myImage.png'; // Set source path

  如果你只用到一张图片的话,这已经够了。但一旦需要不止一张图片,那就需要更加复杂的处理方法,但图片预装载策略超出本教程的范围,

  感兴趣的话可以参考JavaScript Image Preloader

3. 通过 data: url 方式嵌入图像

  我们还可以通过 data: url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用,

  无须再到服务器兜一圈。(还有一个优点是,可以将 CSS,JavaScript,HTML 和 图片全部封装在一起,迁移起来十分方便。)缺点就是图像没法缓存,

  图片大的话内嵌的 url 数据会相当的长

var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkc
        uO4lmNVindo7qyrIXiGBYAOw=='; 

  

图片的调用

1. 绘制图片

drawImage(image, x, y)

 实例:

<script type="application/x-javascript"> 
  function draw()  
  { 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      var img = new Image(); 
      img.src = 'image/backdrop.png'; 
      img.onload = function() 
    { 
        ctx.drawImage(img,0,0); 
        ctx.beginPath();  
      } 
  } 
</script>
 

2.缩放图片

drawImage(image, x, y, width, height)
x,y : 图片绘制的位置
width、height:绘制图片的宽、高:width/image.width :比例缩放
 

3. 切片

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们