HTML5 Canvas之图片引用

梦里梦外; 2023-10-16 20:18 35阅读 0赞

## 图片应用的方式 ##

#### １.　引用页面内的图片 ####

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

#### ２.　由零开始创建图像 ####

>     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][]

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

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

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

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

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

uO4lmNVindo7qyrIXiGBYAOw==';

## 图片的调用 ##

１.　绘制图片

drawImage(image, x, y)

实例：

２.缩放图片

drawImage(image, x, y, width, height)

x,y : 图片绘制的位置

width、height：绘制图片的宽、高：width/image.width :比例缩放

3. 切片

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

[JavaScript Image Preloader]: http://www.webreference.com/programming/javascript/gr/column3/
[data_ url]: http://en.wikipedia.org/wiki/Data:_URL

HTML5 Canvas之图片引用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas之图片引用

相关 HTML5——canvas之动感太极

相关 HTML5 Canvas图片模糊问题

相关 html5 canvas word,HTML5 Canvas

相关 HTML5 Canvas图片马赛克模糊动画

相关 html5＜canvas转换之万花筒＞

相关 HTML5Canvas

相关【HTML5】——Canvas

相关 html5之canvas动画

相关 html5之canvas基础1