如何：使用 KineticJS 将（HTML5）视频绘制到（自定义）画布形状中答案

【问题标题】：How To: Draw (HTML5) Video into (Custom) Canvas Shape with KinecticJS如何：使用 KineticJS 将（HTML5）视频绘制到（自定义）画布形状中
【发布时间】：2013-06-26 17:18:23
【问题描述】：

这是我的例子：http://jsbin.com/urofan/7/edit

我想将视频绘制成自定义形状，而不是矩形，现在可以吗？（PS：形状是可拖动的）我在StackO或网上找到的都是矩形图...

未来，形状将是一个圆形，半径和位置可调（可拖动和调整大小）。

感谢您的帮助。艾伦。

【问题讨论】：

标签： html5-canvas html5-video

【解决方案1】：

您可以使用剪辑方法将图像（视频帧抓取）包含到路径中。

首先定义要包含视频帧的路径。

请注意，您不必进行填充/描边。

context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.lineTo(250, 400);
context.lineTo(40, 80);
context.closePath();

接下来，根据您定义的路径创建一个剪切路径。

在此之后绘制的所有内容都将被剪切到您的剪切路径中。

context.clip();

最后，将视频的帧抓取和drawImage绘制到剪切路径中。

帧抓取只会出现在您的剪切路径内。

context.drawImage(0,0,canvas.width,canvas.height);

这是代码和小提琴：http://jsfiddle.net/m1erickson/aMW74/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var img=document.createElement("img");
    img.onload=function(){
        drawClippedImage(img);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    function drawPathForClipping(context){
        context.beginPath();
        context.moveTo(200, 50);
        context.lineTo(420, 80);
        context.lineTo(250, 400);
        context.lineTo(40, 80);
        context.closePath();
    }

    function drawClippedImage(img){

        var shape = new Kinetic.Shape({
          id: 'shape',
          drawFunc: function(canvas) {
            var context = canvas.getContext();

            // define the path that will be used for clipping
            drawPathForClipping(context);

            // make the last path a clipping path
            context.clip();

            // draw a clipped image (frame grab)
            context.drawImage(img,0,0,img.width,img.height);


            // styling, draw the clip path for real as a border
            drawPathForClipping(context);
            canvas.stroke(this);

          },
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

        // add the shape shape to the layer
        layer.add(shape);
        layer.draw();

    }

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

【讨论】：

谢谢！效果很好。在我的绘图函数中只需要 context.clip()：jsbin.com/urofan/9