• 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18
  • 欢迎访问

    云南11选5前二和值走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    HTML5之画布Canvas

    来源:云南11选五走势图500期     2013年07月02日17:02
    字号:T|T

    云南11选五走势图500期 www.a-mcl.com HTML5最伟大之处在于引入了画布Canvas。Canvas元素是为了客户端点阵图形而设计的,它本身没有绘图能力,但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。本文将通过示例简单介绍canvas的绘图功能。

    canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们在Canvas区域中绘制图形,并不是拿鼠标在Canvas中画画。事实上Canvas元素只是一块无色透明的区域,就像一个只有宽度高度没有背景的DIV一样,需要使用JavaScript脚本在其中绘画。


    示例一:绘制方形

    我们在页面上创建一个canvas元素,并且制定id及宽和高。

    your browser does not support the canvas tag

    Canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用JavaScript来完成:

    var c=document.getElementById("square");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#ff0000";
    cxt.fillRect(0,0,150,75);

    通过document.getElementById("square")来获取canvas元素,然后使用c.getContext("2d")来获取2d绘图对象。接着使用fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。上例中绘制了一个红色的方形。

    示例二:绘制线条

    我们可以通过起始坐标,和结束坐标,来绘制一条直线。

    var line=document.getElementById('line');
    var c=line.getContext('2d');
    c.moveTo(20,20);
    c.lineTo(200,100);
    c.lineTo(20,100);
    c.stroke();

    moveTo(x,y):设置绘图起始坐标。

    lineTo(x, y):从上一个起点到(x,y)的点画线,上一个起点可以通过moveTo来指定,默认为原先路径的终点。

    stroke():描边路径。

    示例三:绘制圆形

    我们可以通过规定尺寸、颜色和位置,来绘制一个圆。

    var c=document.getElementById('circle');
    var r=c.getContext('2d');
    r.fillStyle='#ff0000';
    r.beginPath();
    r.arc(70,80,45,0,Math.PI*2,true);
    r.closePath();
    r.fill();

    beginPath():创建路径的第一步是调用beginPath方法,返回一个存储路径的信息。

    closePath():从当前的点到起始点闭合路径。

    arc(x, y, radius, startAngle, endAngle, anticlockwise): (x,y)是圆弧的圆心,radius-半径, startAngle和endAngle是圆弧的开始和结束弧度(radians = (Math.PI/180)*degree),anticlockwise为true的话是逆时针,否则为顺时针。

    fillStyle:设置填充色。

    fill():填充路径。

    示例四:制作动画

    我们可以通过javascript动态地在画布上绘制图像,并产生动画效果。

    var x=0;
    var y=0;
    var ctx = document.getElementById("animate").getContext("2d");
    setInterval(function(){
    	ctx.clearRect(0,0,600,600);
    	ctx.fillStyle="#fc0";
    	ctx.beginPath();
    	ctx.arc(x++,y++,15,0,Math.PI*2,true);
    	ctx.closePath();
    	ctx.fill();
    },10);

    上述代码中,我们使用setInterval()来定时运行(每隔10毫秒运行一次),画布中,绘制一个黄色的圆形,并且在绘制前先要clearRect() 清除上次绘制的圆形,这样看起来就是一个从画布左上角到右下角运动的小球的简单动画。

    Canvas还能加载图像,绘制颜色渐变的图案,产生阴影效果等,本站将会有更多canvas效果方面的讲解。Canvas是一个很轻便的标签,但是,使用它能完成的非常炫丽效果,这绝对让你震惊。只要有JavaScript脚本的支持,Canvas能完成你几乎能想到的所有效果。

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 王东峰主持召开河北雄安新区规划建设工作领导小组会议 2019-04-19
  • 那样的大环境,谁都难免搞腐败,官员用腐败证明,政治路线是决定一切的,路线不正确,好干部要 变坏,精英会变坏,带领社会风气变坏,慢慢地改变社会性质。 2019-04-19
  • 计划经济是根据政府计划调节经济活动的经济运行体制。又称为指令型经济。小萌以为是各经济组织把自己制订的计划上报一下就叫计划经济? 2019-04-16
  • 吃饭要人喂是行为退化 2019-04-12
  • 阿根廷VS冰岛:冰岛队全力死守抗强敌 2019-04-04
  • 海外版开放谈:开放促内陆高质量发展 2019-03-28
  • 女性之声——全国妇联 2019-03-27
  • 《舌尖上的中国》陈晓卿新作《风味人间》即将登场 2019-03-27
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-03-22
  • 图说互联网(21期)iPhone的10年 下一个10年属于谁? 2019-03-18