HTML5画布剪裁区域教程

来源：互联网发布：sal绘画软件下载编辑：程序博客网时间：2024/06/06 13:22

定义一个剪辑区域使用HTML5画布,我们可以画一个路径,然后使用clip()方法画布的背景。一切之后将被绑定在剪裁区域。一旦我们完成剪裁区域内图纸的事情,我们可以返回画布上下文与restore()方法,以便进一步的图纸不绑定到剪裁区域。

在本教程中,我们将定义一个循环剪切区域画一个圈,然后使用clip(),然后我们就画几个圈内剪循环路径。接下来,我们将恢复画布背景用restore()方法,然后画一个圈在原始剪辑区域。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      var x = canvas.width / 2;      var y = canvas.height / 2;      var radius = 75;      var offset = 50;      /*       * save() allows us to save the canvas context before       * defining the clipping region so that we can return       * to the default state later on       */      context.save();      context.beginPath();      context.arc(x, y, radius, 0, 2 * Math.PI, false);      context.clip();      // draw blue circle inside clipping region      context.beginPath();      context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);      context.fillStyle = 'blue';      context.fill();      // draw yellow circle inside clipping region      context.beginPath();      context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);      context.fillStyle = 'yellow';      context.fill();      // draw red circle inside clipping region      context.beginPath();      context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);      context.fillStyle = 'red';      context.fill();      /*       * restore() restores the canvas context to its original state       * before we defined the clipping region       */      context.restore();      context.beginPath();      context.arc(x, y, radius, 0, 2 * Math.PI, false);      context.lineWidth = 10;      context.strokeStyle = 'blue';      context.stroke();    </script>  </body></html>

0 0