如何用HTML5设计画图程序

　　如何Html5画图?这段画图程序该如何设置，在此，给大家做详细分析，Html5开发工具用的是HBuilder。大家可以使用像记事本一样，dreamware一样的工具，都可以，下面我们进入正题。

　　如何用Html5写画图程序?

　　1.新建一个HTML5的项目，命名为html5_canvas

　　2. 打开这个项目，里面有一个默认的index.html文件，打开之后，这里面就是一个HTML5的结构，在它上面进行画图。

　　3.首先呢!在body里面写上canvas标签，并给它一个id：can，;

　　width：400像素;

　　height：300像素;

　　style：border: 1px #000 solid; margin: 30px auto;

　　4. 先运行，看看这个画布(使用火狐浏览器预览)

　　5.那么再看如何画图呢?

　　这里提供一个script标签。

　　这里有两种方式，本来画图需要把这个script放在canvas的下面。因为页面加载是从上往下加载的。

　　1)步呢!是需要获得canvas的对象。

　　那么就是var can=document.getElementById("can");

　　然后var ctx=can.getContext("2d");(这里面只能写2d)

　　这样就得到了canvas的对象。

　　2)那么再调用这个对象的API进行画图。

　　这是填充的颜色。

　　ctx.fillStyle="#CCC";

　　这个有四个参数，个是横坐标，第二个是纵坐标，然后是宽度和高度(画一个矩形)。

　　ctx.fillRect(50,50,100,60);

　　然后运行看一下结果，刚才就在这画布上画了一个矩形框。

　　这是一种方法。

　　6.然后把这个所有内容复制一下

　　

　　7.然后新建一个html文件，取名为index2.html。

　　把刚才复制的粘贴到这里。

　　1) 也可以这样做，把这个script写在这个head里面，再放到一个函数里面。

　　2)但是，我们必须要让页面加载完了以后才得到它。

　　所以呢!我们在body里面给一个onload事件，这样就能够在页面加载完成之后再调用这个init方法。

　　3)这个把矩形框的颜色变成红色，保存一下。

　　4)然后，再次运行一下，这样就变成了一个红色的矩形框。