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

简介:

   自从停博一段时间后,一直在思考特别是今年开年,在想学习什么技术做为未来的技术储备。本来想加强下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元素 

 

 在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>

 效果如下例子:

 

 注意: beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制(storke)或填充(fill)方法时,结果才会显示出来。否则,只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候,canvas才会马上更新。

使用变换方法在canvas 上绘制对角线

这个方法较之上面的方法多了三个步骤:

 

  1. 首先先保存当前绘图状态save
  2. 再用平衡方法绘制上下文,使用translate
  3. 最后再绘图完毕后使用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如下:

 使用canvas 的save 和 restore注意事项

分为两种情况:

 

  1. 如果你本身绘制的图可以一次性绘制完,那可以不使用save和restore
  2. 如果你绘制图绘制一次后,使用stroke或才fill 后,底下还需要再次做绘制的动作,那么使用save和restore 会更好,不会跟上次的画图冲突,得不到我们想要的效果。 

 

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



 本文转自 terry_龙 51CTO博客,原文链接:http://blog.51cto.com/terryblog/797773,如需转载请自行联系原作者

相关文章
|
3天前
|
前端开发
从零开始学习前端开发:HTML基础
HTML是前端开发的基础,它是网页内容的结构化描述语言。本文将介绍HTML的基本语法、标签和元素,以及如何使用它们来创建简单的网页。
|
5天前
|
存储 安全 机器人
【LLM】智能学生顾问构建技术学习(Lyrz SDK + OpenAI API )
【5月更文挑战第13天】智能学生顾问构建技术学习(Lyrz SDK + OpenAI API )
19 1
|
5天前
|
Kubernetes 安全 API
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
Kubernetes学习-集群搭建篇(三) Node配置完善和API概述
|
5天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
15 4
|
5天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
5天前
|
缓存 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
【4月更文挑战第30天】Flutter允许开发者通过`CustomPaint`和`CustomPainter`进行自定义绘制,以实现丰富视觉效果。`CustomPaint` widget将`CustomPainter`应用到画布,而`CustomPainter`需实现`paint`和`shouldRepaint`方法。`paint`用于绘制图形,如示例中创建的`MyCirclePainter`绘制蓝色圆圈。Canvas API提供绘制形状、路径、文本和图片等功能。注意性能优化,避免不必要的重绘和利用缓存提升效率。自定义绘制让Flutter UI更具灵活性和个性化,但也需要图形学知识和性能意识。
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
|
5天前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
14 1
|
5天前
学习HTML表单最关键要掌握的三个要点
学习HTML表单最关键要掌握的三个要点。
11 1
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
178 0
|
移动开发 前端开发 HTML5
HTML5学习-表格标签
HTML5学习-表格标签

热门文章

最新文章