Javascript Image context.restore（）；_Javascript_Html_Canvas_Clip

Javascript Image context.restore（）；

javascript html canvas

Javascript Image context.restore（）；,javascript,html,canvas,clip,Javascript,Html,Canvas,Clip,我开始学习画布，我刚刚遇到了我的第一个令人沮丧的情况，我试图在三角形中制作一个.jpg src的剪辑遮罩。在我恢复上下文并尝试添加任何其他路径之前，一切看起来都很好。。。我的剪辑遮罩似乎不再存在这是我的密码： <script> function init() { var canvas = document.getElementById('myCanvas'); if(canvas.getContext) { var context = canvas

我开始学习画布，我刚刚遇到了我的第一个令人沮丧的情况，我试图在三角形中制作一个.jpg src的剪辑遮罩。在我恢复上下文并尝试添加任何其他路径之前，一切看起来都很好。。。我的剪辑遮罩似乎不再存在

这是我的密码：

    <script>
function init() {
    var canvas = document.getElementById('myCanvas');
    if(canvas.getContext) {

    var context = canvas.getContext('2d');
    var imageObj = new Image();
    imageObj.src = 'stephgopro2.jpg';

    // triangle coordonate
    context.save();
    context.beginPath;
    context.moveTo(100, 0);
    context.lineTo(0, 100);
    context.lineTo(200, 100);
    context.lineTo(100, 0);
    context.clip();

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, 300, 170);
    };

    context.restore();
    context.beginPath();
    context.fillStyle = '#333';
    context.rect(0, 0, 600, 200);
    context.fill();
    }
}
</script>

</head>
<body onload='init()'>
  <canvas id="myCanvas" width="600" height="200"></canvas>

</body>


函数init（）{
var canvas=document.getElementById（'myCanvas'）；
if（canvas.getContext）{
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.src='steffgopro2.jpg'；
//三角配合物
context.save（）；
context.beginPath；
context.moveTo（100,0）；
lineTo（01100）；
lineTo（200100）；
lineTo（100,0）；
clip（）；
imageObj.onload=函数（）{
drawImage（imageObj，0，0，300，170）；
};
restore（）；
context.beginPath（）；
context.fillStyle='#333'；
rect（0,0600200）；
context.fill（）；
}
}

你能帮我吗？非常感谢。

图像是异步加载的，因此在将图像绘制到画布之前，已经恢复了上下文。如果您按照以下方式更新代码，您将得到（我认为是）您期望的结果：

function init() {
    var canvas = document.getElementById('myCanvas');
        if(canvas.getContext) {

        var context = canvas.getContext('2d');
        var imageObj = new Image();
        imageObj.src = 'assets/1.jpg';

        // triangle coordonate
        context.save();
        context.beginPath();
        context.moveTo(100, 0);
        context.lineTo(0, 100);
        context.lineTo(200, 100);
        context.lineTo(100, 0);
        context.stroke();
        context.clip();

        imageObj.onload = function() {
            context.drawImage(imageObj, 0, 0, 300, 170);

            // Restore the context and continue drawing now the image has been drawn
            context.restore();
            context.beginPath();
            context.fillStyle = '#333';
            context.rect(0, 0, 600, 200);
            context.fill();
        };
    }
}

哦，谢谢，你就是那个人！我只需在三角形上放置第二条路径即可看到图像，现在我可以在恢复上下文后添加所有内容。非常好。很高兴我能帮忙。