zoukankan      html  css  js  c++  java
  • HTML5的Canvas

    什么是 Canvas?

    HTML5的canvas是个很有意思的元素,它通过JavaScript在网页上绘制一个矩形的画布,你可以控制其中的每个像素。

    它拥有多种绘制路径、矩形、圆形、字符及添加图像的方法。

    我们可以获取canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举: 
    1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。 
    2:绘制方法
    clecrRect(left,top,width,height)清除制定矩形区域, 
    fillRect(left,top,width,height)绘制矩形,并以fillStyle填充。 
    fillText(text,x,y)绘制文字; 
    strokeRect(left,top,width,height)绘制矩形,以strokeStyle绘制边界。 
    beginPath():开启路径的绘制,重置path为初始状态; 
    closePath():绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线; 
    moveTo(x,y):设置绘图其实坐标。 
    lineTo(x,y);绘制从当前其实位置到x,y直线。 
    fill(),stroke(),clip():在完成绘制的最后的填充和边界轮廓,剪辑区域。 
    arc():绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小; 
    rect():矩形路径; 
    drawImage(Imag img):绘制图片; 
    quadraticCurveTo():二次样条曲线路径,参数两个控制点; 
    bezierCurveTo():贝塞尔曲线,参数三个控制点; 
    createImageData,getImageData,putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data,其中data为我们色素的记录为 
    argb,所以数组大小长度为width*height*4,顺序分别为rgba。getImageData为获取矩形区域像素,而putImageData则为设置矩形区域像素; 
     
    3:坐标变换: 
    translate(x,y):平移变换,原点移动到坐标(x,y); 
    rotate(a):旋转变换,旋转a度角; 
    scale(x,y):伸缩变换; 
    save(),restore():提供和一个堆栈,保存和恢复绘图状态,save将当前绘图状态压入堆栈,restore出栈,恢复绘图状态;

  • 相关阅读:
    ubuntu下文件安装与卸载
    webkit中的JavaScriptCore部分
    ubuntu 显示文件夹中的隐藏文件
    C语言中的fscanf函数
    test
    Use SandCastle to generate help document automatically.
    XElement Getting OuterXML and InnerXML
    XUACompatible meta 用法
    Adobe Dreamweaver CS5.5 中文版 下载 注册码
    The Difference Between jQuery’s .bind(), .live(), and .delegate()
  • 原文地址:https://www.cnblogs.com/guzhixiang/p/4641888.html
Copyright © 2011-2022 走看看