<html>
<canvas id='a' style='border:1px solid;' width = '200px' height= '200px'>
</canvas>
<script>
function drawDiagonal(){
var canvas = document.getElementById('a');
var context = canvas.getContext('2d');
context.save();//用于原点的恢复,否则是不能恢复的
context.translate(100,100);//原点移动到正中央
context.beginPath();
context.moveTo(0,0);
context.lineTo(-50,-100);
context.stroke();
context.restore();//原点恢复到起初的原点
context.beginPath();
context.moveTo(0,0);
context.lineTo(50,50);
context.stroke();
}
window.addEventListener('load',drawDiagonal,true);
</script>
</html>