首页 专题 H5案例 前端导航 UI框架

Canvas入门基础(四):图像绘制

作者:TG 日期: 2016-06-01 阅读: 1056

要绘制图像,我们首先要获得图像:

第一种:直接获取

<img src="xxjpg" id="myimg"/>


<script>

var img=document.getElementById("myimg");

</script>

第二种:动态创建

<script>

var img=new Image();

img.src="xx.jpg";

img.onload = function(){ // 等待图片加载完毕后再执行绘制 }

</script>


获得了源图对象,我们就可以使用 drawImage 方法将它渲染到 canvas 里。

drawImage 方法有三种形态:

  1. 第一种 基础

drawImage(image, x, y)

image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。


例子:

var img=new Image(); img.src="canvas_girl.jpg"; img.onload=function(){ cxt.drawImage(img,10,10); }


2. 第二种 缩放

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

前面三个参数和第一个方法的含义相同,不过,这个方法多了2个参数:width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小


例子:

var img=new Image(); img.src="canvas_girl.jpg"; img.onload=function(){ cxt.drawImage(img,10,10,100,100); }


3. 第三种 切片

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

第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。其它8个参数中,前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。

例子:

var img=new Image(); img.src="canvas_girl.jpg"; img.onload=function(){ cxt.drawImage(img,120,40,80,80,10,10,80,80); }



关注”全栈技术杂货铺“

全栈技术杂货铺