第一章 基础知识
第九节 打印Canvas的内容
程序清单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';
}
};
HTML5 Canvas核心技术—图形、动画与游戏开发
- 作者：
- David.Geary
- 类别：
- 基础信息化
- 出版社：
- 华章出版社
- 出版时间：
- 2013年5月
- 定价：
- ￥99.00
- 京东价：￥79.70
实际售价以e-works战略合作伙伴当日售价为准