HTML5绘图笔记6：绘制图形

导入图像

Canvas API可以读取本地或网络上的图像文件，然后将该图像绘制在画布中，这主要是通过drawImage()方法实现的。

（1）drawImage()方法

drawImage()方法由绘图上下文ctx调用，该方法定义有三种形式.

ctx.drawImage(image,x,y);

ctx.drawImage(image,x,y,w,h);

ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

(2)ctx绘制图像的步骤

• 创建Image对象

使用不带参数的new 方法创建Image对象，然后在该Image对象的src属性中指定需要绘制的图像文件的路径，具体代码如下。

image=new Image();
image.src=“images/tu1.jpg”;    //设置图像路径和文件名

• 在Image对象的onload事件中同步执行绘制图像的方法

创建Image对象后，就可以通过drawImage()方法绘制该图像文件了,代码如下:

image.onload=function(){
//绘制图形像
}

例子

<canvas id="myCanvas" width="400" height="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.onload = function(){
 ctx.drawImage(img,0,0);
 ctx.font = "26px Arial Black";
 ctx.shadowOffsetX = 3;
 ctx.shadowOffsetY = 3;
 ctx.shadowBlur = 2;  
 ctx.shadowColor = "rgba(0, 0, 0, 0.9)";
 ctx.fillStyle = "yellow";  
 ctx.fillText("飞车",260,380);
}
img.src = 'img/pp.png';
</script>

变换图像

<canvas id="myCanvas" width="400" height="400"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.onload = function(){
 ctx.drawImage(img,0,0,600,610);
 ctx.font = "26px Arial Black";
 ctx.shadowOffsetX = 3;
 ctx.shadowOffsetY = 3;
 ctx.shadowBlur = 2;  
 ctx.shadowColor = "rgba(0, 0, 0, 0.9)";
 ctx.fillStyle = "yellow";  
 ctx.fillText("摄影",260,380);
}
img.src = 'img/pp.png';
</script>

裁剪图像

<canvas id="myCanvas" width="600" height="380"></canvas>
<script language="javascript">
    var ctx = document.getElementById('myCanvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.drawImage(img,30,40,140,180,0,240,140,180);
    }
    img.src = 'img/pp.png';
</script>

图像平铺

在HTML5中使用绘图上下文对象的createPattern()方法来实现平铺非常容易，createPattern方法的定义如下。

context.createPattern(image,type);

该方法需要定义2个参数，image参数为要平铺的图像，type参数必须取下面字符串值之一。

• no-repeat：不平铺
• repeat-x：横向平铺
• repeat-y：纵向平铺
• repeat：全方向平铺

例子

<canvas id="myCanvas" width="500" height="300"></canvas>
<script type="text/javascript">
var image = new Image();      
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d'); 
image.src = "img/pp.png"; 
image.onload = function(){  
 //平铺比例
 var scale=5
 //缩小后图像宽度
 var n1=image.width/scale;
   //缩小后图像高度
 var n2=image.height/scale;
   //平铺横向个数
 var n3=canvas.width/n1;
   //平铺纵向个数
 var n4=canvas.height/n2;
 for(var i=0;i<n3;i++)
  for(var j=0;j<n4;j++)
   context.drawImage(image,i*n1,j*n2,n1,n2);
};         
</script>

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var image = new Image();      
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d'); 
image.src = "img/pp.png";  
image.onload = function(){  
 //创建填充样式，全方向平铺
 var ptrn = context.createPattern(image,'repeat'); 
 //指定填充样式
 context.fillStyle = ptrn;  
 //填充画布
 context.fillRect(0,0,400,300);  
};        
</script>

像素处理

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");  
var context = canvas.getContext('2d');
var image = new Image(); 
image.src = "img/pp.png"; 
image.onload = function (){
 context.drawImage(image, 0, 0);
 var imagedata = context.getImageData(0,0,image.width,image.height);        
 for (var i = 0, n = imagedata.data.length; i < n; i += 4){
  imagedata.data[i+0] = 255 - imagedata.data[i+0]; // red
  imagedata.data[i+1] = 255 - imagedata.data[i+2]; // green
  imagedata.data[i+2] = 255 - imagedata.data[i+1]; // blue
 }
 context.putImageData(imagedata, 0, 0);
};       
</script>