html5在线裁剪,html5的应用-图像裁剪效果图

图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲

效果截图：

代码：

canvas

// 图像裁剪：context.clip()

// context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候

// 先创建裁剪区域

// 再绘制图像(之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲)

// 给出圆形和星形的裁剪代码

function createCircleClip(context) {

context.beginPath();

context.arc(200, 170, 100, 0, Math.PI * 2, true);

context.closePath();

context.clip();

}

function create5StarClip(context) {

var n = 0;

var dx = 200;

var dy = 150;

var s = 150;

context.beginPath();

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 5 * 4;

for (var i = 0; i < 5; i ) {

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(dx x * s, dy y * s);

}

context.closePath();

context.clip();

}

function draw() {

var canvas = document.getElementById("mycanvas");

if (canvas == null)

return false;

var context = canvas.getContext("2d");

context.fillStyle = "black";

context.fillRect(0, 0, 400, 300);

image = new Image();

image.src = "Image/html5.jpg"

image.onload = function () {

//圆形裁剪区

//createCircleClip(context)

//星形裁剪区

create5StarClip(context);

context.drawImage(image,0,0);

}

}

window.οnlοad=draw;

当前浏览器不支持canvas