静下心来,开始接触一下HTML5吧,要不然以后连套页面都不会了。:)
在看手册的时候,canvas画布是一项很强大的东西。类似于WEBQQ的动态背景之类的就不说了,咱是菜鸟,从头学。
先来看一下canvas中的坐标原点,及正、负坐标的取值
那就先试着画一个“米”字吧,高手莫笑!
<canvas id="diagonal" style="border: 1px solid blue;"width="200" height="200">
<scripttype="text/javascript">
var canvas =document.getElementById_x('diagonal');
//指定绘制的类型为2d,并返回其绘画环境
var context =canvas.getContext('2d');
context.moveTo(200, 0);
context.lineTo(0, 200);
context.moveTo(0, 0);
context.lineTo(200,200);
context.moveTo(0,100);
context.lineTo(200,100);
context.moveTo(100,0);
context.lineTo(100,200);
context.stroke();
</script>
<scripttype="text/javascript">
var canvas =document.getElementById_x('diagonal');
//指定绘制的类型为2d,并返回其绘画环境
var context =canvas.getContext('2d');
context.moveTo(200, 0);
context.lineTo(0, 200);
context.moveTo(0, 0);
context.lineTo(200,200);
context.moveTo(0,100);
context.lineTo(200,100);
context.moveTo(100,0);
context.lineTo(100,200);
context.stroke();
</script>
默认的原点坐标是0,0 那么,我们在画图的时候是否可以指定新的原点坐标呢?of course!
我们可以在更改默认原点之前先对context执行save()方法,相当于做一个标记
使用context的translate()方法,可以指定新的原点坐标,后续的moveTo和lineTo的坐标值都是相对于新的原点坐标来操作取值
使用context的restore()方法,可以回到默认的原点坐标去
例如,可以使用下面的方法重新画一个“米”字
<canvas id="diagonal" style="border: 1px solid blue;"width="200" height="200"></canvas>
<script type="text/javascript">
var canvas= document.getElementById_x('diagonal');
varcontext = canvas.getContext('2d');
context.save();
context.translate(200,0);
//这个0,0其实是200,0
context.moveTo(0,0);
context.lineTo(-200,200);
context.moveTo(-200,0);
context.lineTo(0,200);
context.moveTo(-100,0);
context.lineTo(-100,200);
context.moveTo(-200,100);
context.lineTo(0,100);
context.stroke();
</script>
<script type="text/javascript">
var canvas= document.getElementById_x('diagonal');
varcontext = canvas.getContext('2d');
context.save();
context.translate(200,0);
//这个0,0其实是200,0
context.moveTo(0,0);
context.lineTo(-200,200);
context.moveTo(-200,0);
context.lineTo(0,200);
context.moveTo(-100,0);
context.lineTo(-100,200);
context.moveTo(-200,100);
context.lineTo(0,100);
context.stroke();
</script>
或者,画到一半,我们把原点坐标返回到0,0 可以这样做:
<canvas id="diagonal" style="border: 1px solid blue;"width="200" height="200"></canvas>
<script type="text/javascript">
var canvas= document.getElementById_x('diagonal');
varcontext = canvas.getContext('2d');
context.save();
context.translate(200,0);
context.moveTo(0,0);
context.lineTo(-200,200);
context.moveTo(-200,0);
context.lineTo(0,200);
context.restore();
//这时候的100,0是真正相对于原来的0,0时的100,0
context.moveTo(100,0);
context.lineTo(100,200);
context.moveTo(0,100);
context.lineTo(200,100);
context.stroke();
</script>
<script type="text/javascript">
var canvas= document.getElementById_x('diagonal');
varcontext = canvas.getContext('2d');
context.save();
context.translate(200,0);
context.moveTo(0,0);
context.lineTo(-200,200);
context.moveTo(-200,0);
context.lineTo(0,200);
context.restore();
//这时候的100,0是真正相对于原来的0,0时的100,0
context.moveTo(100,0);
context.lineTo(100,200);
context.moveTo(0,100);
context.lineTo(200,100);
context.stroke();
</script>