智言个人博客今天闲来无事，去外面溜达了一圈，然后不经意的去书店买了一本叫《HTML5和JavaScript程序设计》的编程书，本想在工作闲暇之时可以学习学习HTML5的一些新特新，从而能够尽快把这些知识都掌握好，但是当自己翻开书本的时候发现，其实要学习好HTML5应该先把JavaScript学完后再来学习HTML5会比较轻松一点，当然，这也只是智言我目前的一个看法而且，具体还需要我后期的证实才能确定这个结果的真假。
然后我跳过了JavaScript的章节，直接看了看HTML5的一些相关知识，谁知刚看到第一个新特新标签就被深深的吸引住了，哎，我这脆弱的小心脏还能承受些什么？
我其实也就是简单的把HTML5中的新标签canvas这个标签看一下，知道了canvas这个标签其实就是一个画布，具体要画什么，需要我们利用JavaScript的铺助才能去完成。所以这也是我认为应该先把JavaScript学好以后再学HTML5会非常的好上手，而且我发现其实HTML5不难，只要大家多去练、多去思考、多去问就很容易掌握的，而且是一门熟能生巧的程序语言。
那么下面的代码就是我利用HTML5中的新标签canvas+JavaScript完成的HTML英文字母，虽然很简单，但是至少我已经在动手了…
代码如下：
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>HTML5 Demo</title>
<script type="text/JavaScript">
//定义一个check方法
function check(){
var con = document.getElementById("canvas_1");
if (con.getContext)
{
//定义一个变量context，并通过getContext方法获取画布的渲染上下文对象赋值给context变量。
var context = con.getContext("2d");//目前getContext方法只支持2d模式渲染。
/*直线*/
context.beginPath(); //创建一个路径，可以相当于一个启动器，启动了canvas。
context.moveTo(100,100); //开始的点坐标
context.lineTo(200,200); //结束的点坐标
context.stroke(); //闭合路径
/*贝塞尔曲线*/
context.beginPath(); //同上
context.moveTo(100,10); //开始点坐标
context.bezierCurveTo(120,20 , 160,10 , 200,80); //其实就是定义了三个坐标点，中间两点和结束点坐标。
context.lineWidth = 3; //线条的粗细
context.strokeStyle = "red"; //line color
context.stroke(); //闭合路径
/*二次曲线*/
context.beginPath();
context.moveTo(120,100);
context.quadraticCurveTo(180,0,240,100); //同理，就是顶一个了两个坐标点，中间一个点和结束点的坐标。
context.lineWidth = 5;
context.strokeStyle = "blue";
context.stroke()
/*
strokeStyle:设置属性的线条颜色
lineCap:设置线条的端点样式：对接(butt)、圆(round)、方(square)，默认为对接。
lineJoin:设置线条转折处样式：圆角(round)、平角(bevel)、尖角(miter)，默认为尖角。
*/
}else{
alert("您的浏览不支持canvas！");
return false;
}
}
function asni_cn(){
var asni = document.getElementById("canvas_demo");
if(asni.getContext){
var asnicn = asni.getContext("2d");
//正式开始绘制HTML英文图标
/*H*/
asnicn.beginPath();
asnicn.moveTo(50,100);
asnicn.lineTo(50,300);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(50,200);
asnicn.lineTo(150,200);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(150,100);
asnicn.lineTo(150,300);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
/*T*/
asnicn.beginPath();
asnicn.moveTo(170,100);
asnicn.lineTo(270,100);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "red";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(220,100);
asnicn.lineTo(220,300);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "red";
asnicn.stroke();
/*M*/
asnicn.beginPath();
asnicn.moveTo(280,300);
asnicn.lineTo(300,100);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(300,100);
asnicn.lineTo(320,300);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(320,300);
asnicn.lineTo(340,100);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(340,100);
asnicn.lineTo(360,300);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "blue";
asnicn.stroke();
/*L*/
asnicn.beginPath();
asnicn.moveTo(400,100);
asnicn.lineTo(400,300);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "red";
asnicn.stroke();
asnicn.beginPath();
asnicn.moveTo(400,297);
asnicn.lineTo(500,297);
asnicn.lineWidth = 5;
asnicn.strokeStyle = "red";
asnicn.stroke();
}else{
alert("您的浏览器暂时不支持HTML5中的canvas标签，请升级到最新版本或者更换其他浏览器试试!-智言个人博客")
return false;
}
}
</script>
</head>
<body onload="asni_cn();">
<h1>HTML5初学绘制HTML字母-智言个人博客(Www.asni.Cn)</h1>
<!--学习HTML5中的canvas新标签-->
<canvas id="canvas_demo" width="600" height="400" style="border:1px solid;">
您的浏览器不支持canvas标签！
</canvas>
</body>
</html>
显示效果：
当然了，这个只是非常简单的一个方法，而且很笨的一种方法，后期希望大家也要多努力学习简单而高效的方法。
评论前必须登录！
注册