用html敲出字母,今天利用HTML5的新标签canvas绘制出了html英文字母

今天闲来无事，去外面溜达了一圈，然后不经意的去书店买了一本叫《HTML5和JavaScript程序设计》的编程书，本想在工作闲暇之时可以学习学习HTML5的一些新特新，从而能够尽快把这些知识都掌握好，但是当自己翻开书本的时候发现，其实要学习好HTML5应该先把JavaScript学完后再来学习HTML5会比较轻松一点，当然，这也只是智言我目前的一个看法而且，具体还需要我后期的证实才能确定这个结果的真假。

然后我跳过了JavaScript的章节，直接看了看HTML5的一些相关知识，谁知刚看到第一个新特新标签就被深深的吸引住了，哎，我这脆弱的小心脏还能承受些什么？

我其实也就是简单的把HTML5中的新标签canvas这个标签看一下，知道了canvas这个标签其实就是一个画布，具体要画什么，需要我们利用JavaScript的铺助才能去完成。所以这也是我认为应该先把JavaScript学好以后再学HTML5会非常的好上手，而且我发现其实HTML5不难，只要大家多去练、多去思考、多去问就很容易掌握的，而且是一门熟能生巧的程序语言。

那么下面的代码就是我利用HTML5中的新标签canvas+JavaScript完成的HTML英文字母，虽然很简单，但是至少我已经在动手了…

代码如下：

HTML5 Demo

//定义一个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;

}

}

HTML5初学绘制HTML字母-智言个人博客(Www.asni.Cn)

您的浏览器不支持canvas标签！

显示效果：

当然了，这个只是非常简单的一个方法，而且很笨的一种方法，后期希望大家也要多努力学习简单而高效的方法。