HTML5-画布(canvas)之实现裁剪操作

DOCTYPE HTML>
<html>
<head>
<title>剪裁title>
head>
<body>
<canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
canvas>
<br />
<button type="button" onclick="drawIt();">Demobutton>
<button type="button" onclick="clearIt();">清除画布button>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function drawIt() {

clearIt();

var img = new Image();

img.onload
= function () {
ctx.drawImage(img,
0, 0, 512, 512);
}

img.src
= "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
// img.src = "http://www.cnblogs.com/assets/html5_logo.png";

/*
* context.clip() - 只显示当前路径所包围的剪切区域
*/
ctx.beginPath();
ctx.arc(
256, 256, 100, 0, Math.PI * 2, true);
ctx.clip();
}

function clearIt() {
ctx.clearRect(
0, 0, 512, 512);
}

script>
body>
html>

你可能感兴趣的:(前端)