当前位置 : IT培训网 > Web前端 > Web培训 > 如何用HTML5设计画图程序

如何用HTML5设计画图程序

时间：2018-09-21 11:35:35  来源：web前端网  作者：IT培训网  已有：名学员访问该课程
标签(Tag):   HTML5画图程序(1)画图程序(3)
如何Html5画图？这段画图程序该如何设置，在此，IT培训网给大家做详细分析，Html5开发工具用的是HBuilder。大家可以使用像记事本一样，dreamware一样的工具，都可以，下面我们进入正题。

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

如何用Html5写画图程序？

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

如何用HTML5设计画图程序_www.itpxw.cn

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

如何用HTML5设计画图程序_www.itpxw.cn

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

width：400像素；
height：300像素；
style：border: 1px #000 solid; margin: 30px auto;

如何用HTML5设计画图程序_www.itpxw.cn

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

如何用HTML5设计画图程序_www.itpxw.cn

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

这里提供一个script标签。

如何用HTML5设计画图程序_www.itpxw.cn

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

如何用HTML5设计画图程序_www.itpxw.cn

1) 第一步呢！是需要获得canvas的对象。

那么就是var can=document.getElementById("can");
然后var ctx=can.getContext("2d");（这里面只能写2d）
这样就得到了canvas的对象。

如何用HTML5设计画图程序_www.itpxw.cn

2) 那么再调用这个对象的API进行画图。
这是填充的颜色。
ctx.fillStyle="#CCC";
这个有四个参数，第一个是横坐标，第二个是纵坐标，然后是宽度和高度（画一个矩形）。
ctx.fillRect(50,50,100,60);
然后运行看一下结果，刚才就在这画布上画了一个矩形框。

如何用HTML5设计画图程序_www.itpxw.cn

这是一种方法。

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<canvas id="can" width="400" height="300" style="border: 1px #000 solid; margin: 30px auto;"></canvas>

<script language="JavaScript">

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

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

ctx.fillStyle="#CCC";

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

</script>

</body>

</html>

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

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

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

如何用HTML5设计画图程序_www.itpxw.cn

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

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

如何用HTML5设计画图程序_www.itpxw.cn

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

如何用HTML5设计画图程序_www.itpxw.cn

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

如何用HTML5设计画图程序_www.itpxw.cn

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

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始！ IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清？点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通，咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
分享到：QQ空间新浪微博腾讯微博人人网微信
------分隔线----------------------------

大话IT

推荐内容

图文推荐

相关热点