您的位置:澳门402永利com > 关于计算机 > HTML5 初识,html5初识

HTML5 初识,html5初识

发布时间:2019-11-19 03:07编辑:关于计算机浏览(136)

    HTML5 初识,html5初识

    呃。。

    今天开始看一下HTML5的一些东西了。

    准备工作:

    1、一个支持HTML5的浏览器(我用的Opera11.52和IE9),当然,火狐的和Chrome的近几个版本都能很好地支持HTML5

    2、一个HTML的手册(说明书),以方便查阅。

    因为发现目前用得比较多的是canvas,所以直接看了传说中很牛x的canvas标签的大概使用!

    1、HTML中的canvas标签用于画图。。。貌似有点废话,canvas不就是个画布么图片 1 。

    2、canvas标签中画图是由js控制,其中包含HTML5新添加的几个js函数。

    要画图,第一步是要取得画图的上下文环境——context,所以呢要用到这样一个函数

    getContext(contextId)

    在我目前所看到的资料中,contextId的值为 '2d',好像在哪里看到HTML5目前还不支持 ‘3d’,具体的也记不清楚了。

    此函数返回一个canvas的context。

    具体获取方法为:

    var context = document.getElementById('canvasId').getContext('2d')

    突然想到 ,canvas也和以前的html元素一样,可以使用css控制(图片 2 这是真正的废话啊)。

    在获取到了context后,就可以开始画图了,是吧!

    要开始画图,需要先调用一个函数 beginPath()

    具体使用如下:

    context.beginPath();

    当然,有beginPath()就得有endPath()。。。。。不过这次错了,这次却是closePath(),我觉得可以理解成为闭合路径,也就是完成画图 作了。

    context有几个设置属性

    1、设置画图时线的粗细 lineWidth 使用方法为 context.lineWidth = 3; //3即为线的粗细的值,数值越大线越粗,默认值为1

    2、设置画图时线的颜色 strokeStyle 使用方法为 context.strokeStyle = "rgb(255, 0, 0)";

    3、设置填充颜色 fillStyle 使用方法为context.fillStyle = "red" ; 设置方法和上面那个一样的咯。。

    正式开始画咯 图片 3

    当然,我还只学了两种图形

    1、矩形(Rectangle),画法:

    context.rect(left, top, width, height) //这个画法好像不会去实现前面设置的属性,如颜色什么的

    context.strokeRect(left, top, width, height) //这个画法会去实现前面设置的属性

    2、圆(Circle)【说是圆。为啥我的画出来,是椭圆了?】,画法:

    context.arc(120, 120,50,0,Math.PI, true); //120,120这两个值是设置圆心的位置的;50是半径;0是这里的参数是代表的什么属性还不清楚,没看文档,只知道当为0的时候只有半个圆,这应该是决定圆要画多少出来的吧^_^;Math.PI,这个都懂的;参数true表示画圆的上面的部分,false表示画圆的下面的部分,当然,这里的上面部分和下面部分是和前面的参数0有关的,随着0的变化,画出的结果也不一样的了。

    画好了,然后是两个填充(可能有点不准确哈)函数:

    1、context.stroke(); //这个函数在调用context.closePath()后执行(为什么要在后面执行?我也不知道,手册上那么写的,其它的情况还没有测试过) ,执行的结果是填充所画图形的边框(Border)

    2、context.fill(); //这个函数。。。唉 ,不想重复打那些字,跳过好了。执行结果是填充(真正的是填充哦)所画图形的内部区域

    当然了,要是想画个图形,又有边框又要填充效果,那么就调用context.stroke()和context.fill()两个函数了。

    附上今天的代码:

    <!doctype html>
    <html> 
    <head> 
    <title>HTML5 Exercise Page</title> 
    <script type="text/javascript">
    function getContext(id) {
    return document.getElementById(id).getContext('2d');
    }
    function init() {
    var ctx1 = getContext("cvs1"); 
    var ctx2 = getContext("cvs2"); 
    ctx1.beginPath();
    
    ctx1.lineWidth = 3; 
    ctx1.strokeStyle = "#3333AA";
    ctx1.strokeRect(100, 10, 200, 300);
    ctx1.fill();
    ctx1.closePath(0);
    ctx2.beginPath();
    // ctx2.lineWidth = 3; 
    // ctx2.strokeStyle = "rgb(87,65,144)";
    ctx2.fillStyle="red";
    ctx2.arc(120, 120,50,100,Math.PI, true); //参数true表示画上半部分,false表示画下半部分
    // ctx2.arc(100, 100,50,0,Math.PI, false); 
    ctx2.closePath();
    ctx2.stroke(); //这种填充方式只画边框
    ctx2.fill(); //这种填充方式会填充内部区域为默认(指定颜色)
    }
    </script>
    <style type="text/css">
    canvas{
    border:#660033 solid 2px;
    width:400px;
    height:400px;
    }
    </style>
    </head> 
    <body onLoad="init();"> 
    <canvas id="cvs1">Browser does not support HTML5 element canvas!</canvas>
    <canvas id="cvs2">Browser does not support HTML5 element canvas!</canvas>
    </body> 
    </html>
    

      

    初识,html5初识 呃。。 今天开始看一下HTML5的一些东西了。 准备工作: 1、一个支持HTML5的浏览器(我用的Opera11.52和IE9),当然,火狐...

    本文由澳门402永利com发布于关于计算机,转载请注明出处:HTML5 初识,html5初识

    关键词: