For investors
股价:
5.36 美元 %For investors
股价:
5.36 美元 %认真做教育 专心促就业
此处的裁切与上面所说的切片不同,区别在于裁切仅仅是在图像源上裁下指定路径大小的图片,
并不做任何处理,比如 位移、缩放等都保留与源图像一致。
语法:ctx.clip();
说明:该方法不需要任何参数,但在执行clip之前先要绘制好裁切路径(一个封闭区域),在
执行clip之后需要使用drawImage()方法引入图像。
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<body>
<canvas
id= "canvasImage" width= "1500" height= "800" ></canvas>
<script>
var canvas=document.getElementById( 'canvasImage' );
var ctx=canvas.getContext( '2d' );
//
创建图片对象
var img= new Image();
img.src= '../Images/rotation01.jpg' ;
//
创建图片加载事件
img.onload= function ()
{
ctx.beginPath();
ctx.arc(230,278,150,0,2*Math.PI, false ); //绘制圆形裁切路径。
//
ctx.rect(80,120,300,315); //绘制矩形裁切路径。
ctx.clip();
ctx.drawImage(img,10,10);
}
</script>
</body>
|