程序清单1-11 使用toDataURL()方法将canvas的内容打印出来（HTML代码）
<!DOCTYPE html>
<head>
<title>Clock</title>
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
left: 10px;
top: 1.5em;
margin: 20px;
border: thin solid #aaaaaa;
}
#snapshotImageElement {
position: absolute;
left: 10px;
top: 1.5em;
margin: 20px;
border: thin solid #aaaaaa;
}
</style>
</head>
<body>
<div id='controls'>
<input id='snapshotButton' type='button'value='Take snapshot'/>
</div>
<img id='snapshotImageElement'/>
<canvas id='canvas' width='400' height='400'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
程序清单1-12 使用toDataURL()方法将canvas的内容打印出来（JavaScript代码）
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
snapshotButton =document.getElementById('snapshotButton'),
snapshotImageElement =
document.getElementById('snapshotImageElement'),
loop;
// Clock drawing functions are omitted from this listing
// in the interests of brevity. See Example 1.4
// for a complete listing of those methods.
// Event handlers.....................................................
snapshotButton.onclick = function (e) {
var dataUrl;
if (snapshotButton.value === 'Take snapshot') {
dataUrl = canvas.toDataURL();
clearInterval(loop);
snapshotImageElement.src = dataUrl;
snapshotImageElement.style.display ='inline';
canvas.style.display = 'none';
snapshotButton.value = 'Return to Canvas';
}
else {
canvas.style.display = 'inline';
snapshotImageElement.style.display = 'none';
loop = setInterval(drawClock, 1000);
snapshotButton.value = 'Take snapshot';
}
};
ICP经营许可证：鄂B2-20080078
（于2003年首获许可证:鄂B2－20030029）
鄂公网安备：420100003343号
© 2002-2025 武汉制信科技有限公司 版权所有
投诉举报电话：027-87592219
购买
在线阅读
需求中心
AI助手
联系我们
返回顶部