怎么用html画图,如何用HTML5设计画图程序

如何Html5画图？这段画图程序该如何设置，在此，IT培训网给大家做详细分析，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. 然后把这个所有内容复制一下

var can=document.getElementById("can");

var ctx=can.getContext("2d");

ctx.fillStyle="#CCC";

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

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

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

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

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

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

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

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

综上所述，IT培训网老师讲解了画图的基本方法，大概有三点：1. 基本方法就是，在页面上给一个canvas元素。2. 然后通过得到canvas的DOM。3. 通过canvasDOM对象得到 CanvasRederingContext2D对象。然后调用它的相应的API来进行画图