图片上下文.restore();
Posted
技术标签:
【中文标题】图片上下文.restore();【英文标题】：Image context.restore(); 【发布时间】：2012-11-22 17:48:46 【问题描述】：我开始学习画布，我刚刚遇到了第一个令人沮丧的情况，我试图在三角形中制作一个 .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" ></canvas>
</body>
你能帮我解决这个问题吗？非常感谢。
【问题讨论】：
【参考方案1】：图像是异步加载的，因此在图像绘制到画布之前已经恢复了上下文。如果您按以下方式更新代码，您将获得（我认为是）您期望的结果：
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();
;
【讨论】：
哦，谢谢，你就是那个男人！我只需将第二条路径放在三角形上即可查看图像，现在我可以在恢复的上下文之后添加所有内容。 优秀。很高兴我能提供帮助。以上是关于图片上下文.restore();的主要内容，如果未能解决你的问题，请参考以下文章