虽然HTML5应用已经有一段时间了，且是当前的热门前段技术，但是LZ本人却一直都未涉猎，最近项目组中使用了百度的Echarts插件，用来绘制和展示地图数据，感觉效果还是很不错的。因此在业余时间，自己开始学习html5语言，总体上html5新标签变化力度并不大，这方面的使用不做赘述。比较大的改动主要在实现了Canvas绘图以及前端存储，前端存储部分LZ尚未学习，所以本次只简单介绍下绘图的学习，Canvas据说可以达到像素级，自己试验效果确实不错，不过对于LZ项目中主流的IE浏览器来说，目前只支持IE9+版本，确实还是蛮遗憾的，火狐谷歌版本支持较好。
如下为LZ测试代码片段，包括矩形，圆，三角形，组合图形，渐变和图形变换等基本图形的绘制：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script type="text/javascript">
var e=("article,footer,header,nav,section").split();
for(var i=0;i<e.length;i++){
document.createElement(e[i]);
}
</script>
<![endif]-->
<script type="text/javascript">
$(function()
{
var tCanvas = document.getElementById("canvasOne");
var ct = tCanvas.getContext("2d");
ct.beginPath(); //开始绘制路线
//圆
ct.strokeStyle = "red";
ct.lineWidth = 1;
ct.arc(50, 100, 30, 0, 2*Math.PI, false); //full circle
ct.moveTo(180,100);
ct.arc(150, 100, 30, 0, 3*Math.PI/4, false); //1/4 circle
ct.moveTo(280,100);
ct.arc(250, 100, 30, 0, Math.PI/2, true); //3/4 circle
//矩形
ct.fillRect(50,200,40,40); //实心矩形
ct.strokeRect(150,200,40,40); //边框矩形
ct.clearRect(60,210,15,15); //清除矩形
//三角形
ct.moveTo(50,400);
ct.lineTo(50,480);
ct.lineTo(130,400);
ct.stroke();
ct.closePath(); //结束绘制路线
//文字
ct.fillStyle="red";
ct.strokeStyle="red";
ct.font = "30px 微软雅黑";
ct.fillText('1223',50,300);
ct.strokeText('Hello World!!!',150,300);
//复杂图形
ct.moveTo(350,0);
ct.lineTo(400,0);
ct.arc(400,50,50,Math.PI/2*3,0,false);
ct.lineTo(400,100);
ct.lineTo(350,100);
ct.lineTo(350,0);
//ct.fill(); //填充
//渐变
//createLinearGradient(xStart, yStart, xEnd, yEnd)。
var gr = ct.createLinearGradient(0, 0, 0, 100);
//Add the color stops.
gr.addColorStop(0,'black');
gr.addColorStop(1,'white');
//Use the gradient for the fillStyle.
ct.fillStyle = gr;
//fillRect(x, y, width, height);
ct.fillRect(450, 0, 100, 100);
ct.stroke();
ct.closePath(); //结束绘制路线
//变换
ct.translate(150,550);
for (var i=1;i<6;i++)
{
// Loop through rings (in to out)
ct.save();//push stack
ct.fillStyle = 'rgb('+(255-51*i)+','+(51*i)+',0)';
for (var j=0;j<i*6;j++){
// draw individual dots
ct.rotate(Math.PI*2/(i*6));
ct.beginPath();
ct.arc(0,i*25,10,0,Math.PI*2,true);
ct.fill();
}
ct.restore();//pop stack
}
});
</script>
</head>
<body>
<canvas id="canvasOne" width="700" height="700"></canvas>
</body>
<html>
附件是使用html5搞了两个小样例，一个球形碰壁反弹，一个是html5的拖拽功能，供参考。
相关推荐
- 如果是在NetBeans环境中，还需要设置HTML和JavaScript的运行环境，如引入Web服务器来测试网页应用。 在压缩包文件“baidu”中，可能包含了项目的源代码、配置文件、示例数据等资源。通过对这些文件的分析，初学者...
对于初学者，理解CSS和DIV的关键在于实践和理解。阅读《CSS2.0中文手册》是一个好的起点，它会详细介绍这些概念和技术。同时，动手编写代码，结合实际案例，可以帮助巩固理论知识，提升应用能力。记住，只有通过实际...
5. **数据库连接**：留言板通常需要与数据库交互，保存和检索用户的留言。这可能涉及到Java的JDBC（Java Database Connectivity）API，包括加载驱动、建立连接、执行SQL语句和处理结果集。 6. **MVC设计模式**：...
通过这个项目，初学者可以深入理解MVC模式如何在实际项目中应用，如何组织代码，以及如何使用Java进行Web开发。同时，项目中的游戏逻辑也是一个很好的练习，可以帮助开发者提升问题解决和算法设计能力。
5. 表单处理：在许多网站中，用户需要填写表单才能获取到详细信息或执行某些操作，爬虫也需要模拟这一过程以获取数据。本书中会介绍如何使用Python处理表单提交，包括构建表单数据和设置合适的请求头。 6. 验证码...
10. **学习资源**：对于初学者，可以参考W3Schools、MDN Web Docs等在线教程来学习HTML。 在没有具体代码的情况下，我们只能推测这个"riot-games-dribble"项目可能是一个HTML基础的实践，或者是针对Riot Games游戏...
接下来，我们将使用Web Scraper，这是一个网页抓取的Chrome扩展工具，非常适合初学者快速上手。它允许我们在浏览器中直观地设定抓取规则，而无需编写复杂的代码。以下是使用Web Scraper抓取知乎大V张佳玮文章标题的...
5. **处理`mouseup`事件**：在`stopDragging`函数中，移除`mousemove`事件监听器，以防止元素在鼠标松开后继续移动。 ```javascript function stopDragging() { document.removeEventListener('mousemove', drag)...
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的...本入门篇的目的是为了让初学者快速了解并掌握AJAX的基础知识和使用方法，为更深层次的Web开发打下坚实的基础。