Html 使用KineticJS为图像剪裁遮罩效果
我想要HTML5中图像的剪辑遮罩效果。请找到我的 如果我使用 而不是 它可以很好地将舞台对象创建为- var阶段=新的动力学阶段（“容器”，800800） 如何在v4.4.1.min.js中实现此功能Html 使用KineticJS为图像剪裁遮罩效果,html,kineticjs,Html,Kineticjs,我想要HTML5中图像的剪辑遮罩效果。请找到我的 如果我使用 而不是 它可以很好地将舞台对象创建为- var阶段=新的动力学阶段（“容器”，800800） 如何在v4.4.1.min.js中实现此功能 谢谢。在KineticJS中有几种剪辑方法 可以在其中一个预定义形状内使用填充图案，如下所示： var clipWithFill = new Kinetic.Circle({ … fillPatternImage: img,
谢谢。在KineticJS中有几种剪辑方法 可以在其中一个预定义形状内使用填充图案，如下所示：
var clipWithFill = new Kinetic.Circle({
…
fillPatternImage: img,
fillPatternOffset: [-160, 90],
…
});
正文{margin:0px；padding:0px；}
画布{边框：1px纯红；}
功能牵引夹（img）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：300
});
var layer=新的动能层（）；
var clipWithFill=新的动力学圆({
x:100，
y:100，
半径：75，
图片：img，
fillPatternOffset:[30,90]，
fillPatternRepeat:“不重复”，
笔画：“黑色”，
冲程宽度：5，
德拉格布尔：是的
});
添加图层（clipWithFill）；
var clipWithCustomShape=新的动能.Shape({
drawFunc:函数（画布）{
var context=canvas.getContext（）；
context.save（）；
context.beginPath（）；
//绘制自定义剪裁形状
drawOurCustomShape（上下文）
//将其设置为上下文的剪裁区域
clip（）；
//绘制将被剪裁的图像
背景。绘图图像（img，200，75）；
//
restore（）；
//重新绘制我们的自定义形状
//只是为了勾勒出我们的裁剪区域
drawOurCustomShape（上下文）；
canvas.fillStroke（这个）；
},
笔画：“黑色”，
冲程宽度：5，
德拉格布尔：是的
});
layer.add（clipWithCustomShape）；
函数drawOurCustomShape（上下文）{
上下文。moveTo（200150）；
贝塞尔曲线图（25017030020390100）；
lineTo（350220）；
lineTo（250220）；
closePath（）；
}
阶段。添加（层）；
}
函数houseToPNG（）{
var tempCanvas=document.createElement（“画布”）；
var tempCtx=tempCanvas.getContext（“2d”）；
tempCanvas.width=140；
高度=140；
客厅（tempCtx）；
var img=新图像（）；
img.onload=函数（）{
tempCanvas=null；
拉丝夹（img）；
}
img.src=tempCanvas.toDataURL（）；
}
多功能客厅（ctx）{
ctx.save（）；
//屋顶
ctx.beginPath（）；
ctx.fillStyle=“红色”；
ctx.strokeStyle=“灰色”；
ctx.lineWidth=4；
ctx.moveTo（5,40）；
ctx.lineTo（135,40）；
ctx.lineTo（70,4）；
ctx.closePath（）
ctx.fill（）；
ctx.stroke（）；
//框架
ctx.beginPath（）；
ctx.fillStyle=“蓝色”；
ctx.strokeStyle=“灰色”；
ctx.lineWidth=4；
ctx.rect（20,40,100,100）；
ctx.fill（）；
ctx.stroke（）；
//窗户
ctx.beginPath（）；
ctx.fillStyle=“浅灰色”；
ctx.strokeStyle=“橙色”；
ctx.lineWidth=3；
ctx.rect（40,55,20,25）；
ctx.rect（80,55,20,25）；
ctx.fill（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.strokeStyle=“tan”
ctx.moveTo（42,68）；
ctx.lineTo（58,68）；
ctx.moveTo（82,68）；
ctx.lineTo（98,68）；
ctx.moveTo（50,57）；
ctx.lineTo（50,78）；
ctx.moveTo（90,57）；
ctx.lineTo（90,78）；
ctx.stroke（）；
//门
ctx.beginPath（）；
ctx.fillStyle=“紫色”；
ctx.strokeStyle=“橙色”；
ctx.lineWidth=3；
ctx.rect（60,95,20,40）；
ctx.rect（73,115,1,1）；
ctx.fill（）；
ctx.stroke（）；
//
ctx.restore（）；
}
houseToPNG（）；
var clipWithFill = new Kinetic.Circle({
…
fillPatternImage: img,
fillPatternOffset: [-160, 90],
…
});
正文{margin:0px；padding:0px；}
画布{边框：1px纯红；}
功能牵引夹（img）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：300
});
var layer=新的动能层（）；
var clipWithFill=新的动力学圆({
x:100，
y:100，
半径：75，
图片：img，
fillPatternOffset:[30,90]，
fillPatternRepeat:“不重复”，
笔画：“黑色”，
冲程宽度：5，
德拉格布尔：是的
});
添加图层（clipWithFill）；
var clipWithCustomShape=新的动能.Shape({
drawFunc:函数（画布）{
var context=canvas.getContext（）；
<!DOCTYPE HTML>
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
canvas{border:1px solid red;}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
function drawClips(img) {
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 300
});
var layer = new Kinetic.Layer();
var clipWithFill = new Kinetic.Circle({
x: 100,
y: 100,
radius: 75,
fillPatternImage: img,
fillPatternOffset: [30, 90],
fillPatternRepeat: "no-repeat",
stroke: 'black',
strokeWidth: 5,
draggable: true
});
layer.add(clipWithFill);
var clipWithCustomShape = new Kinetic.Shape({
drawFunc: function (canvas) {
var context = canvas.getContext();
context.save();
context.beginPath();
// draw our custom clipping shape
drawOurCustomShape(context)
// set it as the context's clipping region
context.clip();
// draw the image which will be clipped
context.drawImage(img, 200, 75);
//
context.restore();
// re-draw our custom shape
// just to outline our clipped region
drawOurCustomShape(context);
canvas.fillStroke(this);
},
stroke: 'black',
strokeWidth: 5,
draggable: true
});
layer.add(clipWithCustomShape);
function drawOurCustomShape(context) {
context.moveTo(200, 150);
context.bezierCurveTo(250, 170, 300, 20, 390, 100);
context.lineTo(350, 220);
context.lineTo(250, 220);
context.closePath();
}
stage.add(layer);
}
function houseToPNG() {
var tempCanvas = document.createElement("canvas");
var tempCtx = tempCanvas.getContext("2d");
tempCanvas.width = 140;
tempCanvas.height = 140;
drawHouse(tempCtx);
var img = new Image();
img.onload = function () {
tempCanvas = null;
drawClips(img);
}
img.src = tempCanvas.toDataURL();
}
function drawHouse(ctx) {
ctx.save();
// roof
ctx.beginPath();
ctx.fillStyle = "red";
ctx.strokeStyle = "gray";
ctx.lineWidth = 4;
ctx.moveTo(5, 40);
ctx.lineTo(135, 40);
ctx.lineTo(70, 4);
ctx.closePath()
ctx.fill();
ctx.stroke();
// frame
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.strokeStyle = "gray";
ctx.lineWidth = 4;
ctx.rect(20, 40, 100, 100);
ctx.fill();
ctx.stroke();
// windows
ctx.beginPath();
ctx.fillStyle = "lightgray";
ctx.strokeStyle = "orange";
ctx.lineWidth = 3;
ctx.rect(40, 55, 20, 25);
ctx.rect(80, 55, 20, 25);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "tan"
ctx.moveTo(42, 68);
ctx.lineTo(58, 68);
ctx.moveTo(82, 68);
ctx.lineTo(98, 68);
ctx.moveTo(50, 57);
ctx.lineTo(50, 78);
ctx.moveTo(90, 57);
ctx.lineTo(90, 78);
ctx.stroke();
// door
ctx.beginPath();
ctx.fillStyle = "purple";
ctx.strokeStyle = "orange";
ctx.lineWidth = 3;
ctx.rect(60, 95, 20, 40);
ctx.rect(73, 115, 1, 1);
ctx.fill();
ctx.stroke();
//
ctx.restore();
}
houseToPNG();
</script>
</body>
</html>