[ 登录注册 ]

HTML5

HTML5 学习手笔一:canvas API 画对角线

2016/08/17 14:09 [db:作者] 返回上一页

自从停博一段时间后,一直在思考特别是今年开年,在想学习什么技术做为未来的技术储备。本来想加强下Android 底层方面的知识,但觉得工作上跟这块有所涉及再学习的话有点懒,由于Windows Phone 7 开发工作上没有涉及,目前也算是入门,未来短时间内不会考虑将其应用于工作选择,故不做考虑。现选择了两个方向为:IOS和HTML5,手上的毛主席相对比较紧还没有买MAC,所以优先选择了HTML5先涉猎一下,以后再考虑精通或者再涉猎IOS,作为未来的技术储备。

关于HTML5的简介和推广者网上一大把资料这里就略过,直接进入主题。
 
 
 
在页面中加入HTML5->canvas
 
在HTML页面中插入canvas 元素非常直观。只要在HTML源码中插入canvas标签:
 
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带实心边框的canvas 元素

 

请使用支持HTML5的浏览器浏览

 

在canvas中绘制一条对角线

步骤分为:

 

  1. 首先获得页面元素中的canvas对象: var canvas=document.getElementById('diagonal');
  2. 得到canvas的上下文 :var context=canvas.getContext('2d');
  3. 通知canvas将要开始绘制一个新的图形:context.beginPath();
  4. 将当前的位置移动到新的目标坐标(x,y)。(不绘制):context.moveTo(0,0);
  5. 将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线:context.lineTo(140,70);
  6. 调用canvas根据上面的指示绘制图:context.stroke();

 

根据上面的步骤,编写的代码为:

 
<!DOCTYPE html>
 <html>
 <canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
 <script>
 function drawDiagonal()
 {
 var canvas=document.getElementById('diagonal_line');//获得canvas对象
 var context=canvas.getContext('2d'); //获取canvas的 上下文
 //用绝对坐标来创建一条路径
 context.beginPath();
 context.moveTo(0,0);//将光标移动到x为0,y为0的地方开始准备从这里开始绘制
 context.lineTo(140,70);//绘制到x 坐标为140,y坐标为70的地方
 
 //将这条线绘制到canvas上
 context.stroke(); //只有调用stroke canvas 才会绘制图像显示结果
 }
 
 window.addEventListener("load",drawDiagonal,true);
 </script>
 
</html>
 
效果如下例子:
 
<iframe frameborder="0" height="220" scrolling="no" src="http://files.cnblogs.com/TerryBlog/line_canvas.htm" width="300"></iframe>
 
 
注意:beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制(storke)或填充(fill)方法时,结果才会显示出来。否则,只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候,canvas才会马上更新。
 
使用变换方法在canvas 上绘制对角线
 
这个方法较之上面的方法多了三个步骤:
 
 
 
首先先保存当前绘图状态save
再用平衡方法绘制上下文,使用translate
最后再绘图完毕后使用restore 恢复原有的绘图状态。
 
 
至于为什么要使用save和restore方法,演示完DEMO会讲述。变化方法绘制对角线的代码如下:
 
<script>
 function drawDiagonal()
 {
 var canvas=document.getElementById('diagonal');
 var context=canvas.getContext('2d');
 //保存当前绘图的状态
 context.save();
 
 //向右下方移动绘图上下文
 context.translate(70,140);//平移-> x表示将坐标原点向左右移动多少个单位y表示将坐标原点向上下移动多少个单位
 
 //画图
 context.beginPath();
 context.moveTo(0,0);
 context.lineTo(70,-70);
 context.stroke();
 
 //恢复原有的绘图状态
 context.restore();
 
 //之所以要使用save 和restore 是因为在操作canvas 时先把状态保存,然后如果下面还需要操作canvas时将状态恢复过来不会,这样不会影响到上面我们画完的结果。
 }
 window.addEventListener("load",drawDiagonal,true);
 
</script>
 
 
 
演示的DEMO如下:
 
<iframe frameborder="0" height="220" scrolling="no" src="http://files.cnblogs.com/TerryBlog/translate_canvas.htm" width="300"></iframe>
 
使用canvas 的save 和restore注意事项
 
分为两种情况:
 
 
 
如果你本身绘制的图可以一次性绘制完,那可以不使用save和restore
如果你绘制图绘制一次后,使用stroke或才fill 后,底下还需要再次做绘制的动作,那么使用save和restore 会更好,不会跟上次的画图冲突,得不到我们想要的效果。
 
 

几个简单的小例子,稍微了解了HTML5 的一些编写方式和它强悍的API,虽然目前还没有好用的IDE来编写HTML5应用或游戏,但随着HTML5一步步的来临,对它的未来应用非常有信心

作者 Terry_龙

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377678.html
评论
发表评论