canvas图像以及剪切

时间：2016-01-28 21:08:11 阅读：235 评论：0 收藏：0 [点我收藏+]

标签：

图像篇：

　　代码：

 1 /**
 2  * Created by Administrator on 2016/1/28.
 3  */
 4 function draw (id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext("2d");
 7     var newImg = new Image();
 8     newImg.src = "女孩.jpg";
 9     newImg.onload = function (){
10     // onload 保证了图片的加载完成
11 //        context.drawImage(newImg,0,0);
12 //        context.drawImage(newImg,0,0,150,200);
13 //        context.drawImage(newImg,0,0,100,100,0,0,120,120);
14     }
15 }

View Code

主要用到的方法,drawImage()。

　　格式有三种:

　　　　1）drawImage(image,x,y): image：所要添加的图像对象，图像坐标。

　　　　2）drawImage(image,x,y,width,height):添了个能改变图像大小的参数，后面两个数值用于确定图像的的大小，可用于缩放。

　　　　3）drawImage(image，sx,sy,swidth,sheight,x,y,Width,Height):

技术分享

为方便记忆自己总结如下：

　　　　前四个数值用于确定剪切时图像的坐标及剪切后图像的宽度高度。被剪切图像即剪切后的图像。

　　　　后四个数值用于确定剪切后的图像的摆放位置坐标及剪切后图像设置的新的宽度和高度。

最后值得注意的是，drawImage()方法不仅可以放图像还可以放置画布和视频。

这里还应该注意onload的应用，它保证了图片加载完成即成功显示了图片。

* 放置画布时妙点领悟,可以把一个图片当成画布（背景），再在其上面绘制新的东西。*

剪切篇：

　　代码：

 1 /**
 2  * Created by Administrator on 2016/1/28.
 3  */
 4 function draw (id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext("2d");
 7     var newImage = new Image();
 8     newImage.src = "动漫人物多.jpg";
 9     newImage.onload = function(){
10 //       context.save();
11        ArcClip(context);
12        context.drawImage(newImage,0,0);
13 //       context.restore();
14        context.globalAlpha = 0.6;
15        FillRect(context);
16     }
17 }
18 function FillRect(context){
19     context.beginPath();
20     context.rect(150,150,90,90);
21     context.fillStyle = "#f90";
22     context.fill();
23 }
24 function ArcClip(context){
25     context.beginPath();
26     context.arc(150,150,100,0,Math.PI*2,true);
27     context.clip();
28 }