位置:南宁达内IT教育培训学校 > 学校动态 > 如何Html5画图
如何Html5画图?这段画图程序该如何设置,在此,给大家做详细分析,Html5开发工具用的是HBuilder。大家可以使用像记事本一样,dreamware一样的工具,都可以,下面我们进入正题。
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)然后,再次运行一下,这样就变成了一个红色的矩形框。
综上所述,老师讲解了画图的基本方法,大概有三点:1.基本方法就是,在页面上给一个canvas元素。2.然后通过得到canvas的DOM。3.通过canvasDOM对象得到 CanvasRederingContext2D对象。然后调用它的相应的API来进行画图
尊重原创文章,转载请注明出处与链接:http://www.peixun360.com/1658/news/557035/违者必究! 以上就是南宁达内IT教育培训学校 小编为您整理 如何Html5画图的全部内容。