zoukankan      html  css  js  c++  java
  • javascript canvas全部API

      1 
      2 HTMLCanvasElement//canvas elem对象
      3 属性
      4 height//
      5 width//
      6 方法
      7 getContext()//获取<canvas>相关的可绘制的上下文
      8 toBlob()//(ie 不支持)此方法可以将<canvas>画布转换为base64格式的图片数据,我们可以通过设定参数指定转换的图片类型,甚至图片的清晰度
      9 toDataURL()//可以将<canvas>画布转换为Blob对象
     10 
     11 
     12 
     13 CanvasRenderingContext2D//等于 canvas.getContext('2d')对象;
     14 绘制矩形
     15 canvas.clearRect()//清除指定矩形区域内部所有的像素信息为初始色(通常为透明)。
     16 canvas.fillRect()//矩形填充,可以填充颜色,渐变,图案等。
     17 canvas.strokeRect()//矩形描边。
     18 
     19 绘制文本
     20 canvas.fillText()//文字填充,可以填充纯色,渐变或者图案。
     21 canvas.strokeText()//文字描边。
     22 canvas.measureText()//文字测量。返回TextMetrics对象,该对象的width属性值就是字符占据的宽度。
     23 
     24 文本样式
     25 canvas.font//设置字体相关样式,包括字号,字体信息。默认值是10px sans-serif。
     26 canvas.textAlign//设置文本水平对齐方式。支持属性值有:start(默认值),end,left,right以及center。
     27 canvas.textBaseline//设置文本基线对齐方式。支持属性值有:top,hanging,middle,alphabetic(默认值),ideographic,bottom。
     28 canvas.direction//设置文本显示方向。支持属性值有:inherit(默认值),ltr和rtl。
     29 
     30 填充和描边
     31 canvas.fillStyle//填充样式。默认值是#000000纯黑色。
     32 canvas.fill()//填充。
     33 canvas.strokeStyle//描边样式。默认值是#000000纯黑色。
     34 canvas.stroke()//描边。
     35 
     36 渐变相关
     37 canvas.createLinearGradient()//创建线性渐变。
     38 canvas.createRadialGradient()//创建径向渐变。
     39 
     40 图案相关
     41 canvas.createPattern()//创建图案。图案内容可以是图片,可以是<canvas>元素,也可以是渐变。此方法返回CanvasPattern对象。
     42 
     43 阴影相关
     44 canvas.shadowBlur//阴影模糊大小。默认值是0。
     45 canvas.shadowColor//阴影颜色。默认值是全透明黑色。
     46 canvas.shadowOffsetX//阴影水平偏移大小。默认值是0。
     47 canvas.shadowOffsetY//阴影垂直偏移大小。默认值是0。
     48 
     49 绘制路径
     50 canvas.beginPath()//开始一个新路径。
     51 canvas.closePath()//闭合一个路径。
     52 canvas.moveTo()//路径绘制起始点。
     53 canvas.lineTo()//绘制直线到指定坐标点。
     54 canvas.bezierCurveTo()//绘制贝赛尔曲线到指定坐标点。
     55 canvas.quadraticCurveTo()//绘制二次贝赛尔曲线到指定坐标点。
     56 canvas.arc()//绘制圆弧(包括圆)。
     57 canvas.arcTo()//绘制圆弧,和之前的点以直线相连。
     58 canvas.rect()//绘制矩形路径。
     59 canvas.ellipse()//绘制椭圆路径。
     60 canvas.clip()//创建剪裁路径,之后绘制的路径只有在里面的才会显示。
     61 
     62 线条样式
     63 canvas.lineWidth//线条宽度,主使用场景是描边,默认宽度是1.0,支持小数。
     64 canvas.lineCap//线条端点的样式。支持如下属性值:butt(默认值,断头,无端帽),round(圆形端帽),square(方形端帽)。
     65 canvas.lineJoin//线条转角的样式。支持如下属性值:miter(默认值,尖角),round(圆角),bevel(平角)。
     66 canvas.miterLimit//尖角限制比率。线条的尖角如果没有限制,在线条粗角度小的情况下会很长很长,因此,需要一个限制比率。默认是10。
     67 canvas.getLineDash()//返回当前虚线数值。返回值是一个偶数个数的数组
     68 canvas.setLineDash()//设置线条为虚线。
     69 canvas.lineDashOffset//设置虚线的起始偏移。
     70 
     71 位置检测
     72 canvas.isPointInPath()//当前点是否在指定路径内。
     73 canvas.isPointInStroke()//当前点是否在指定路径描边上。
     74 
     75 变换
     76 canvas.rotate()//旋转。
     77 canvas.scale()//缩放。
     78 canvas.translate()//位移。
     79 canvas.transform()//当前矩阵变换基础上再次矩阵变换。
     80 canvas.setTransform()//直接重置为当前设置的矩阵变换。
     81 
     82 透明度和层级
     83 canvas.globalAlpha//全局透明度。
     84 canvas.globalCompositeOperation//设置图形叠加时候的混合方式,可以用来改变绘制元素上下叠加关系,也就是层级。
     85 
     86 图片与像素
     87 canvas.drawImage()//图片绘制在画布上。
     88 //drawImage 优化: 离屏绘制:
     89 /* 上一节提到,绘制同样的一块区域,如果数据源是尺寸相仿的一张图片,那么性能会比较好,
     90 而如果数据源是一张大图上的一部分,性能就会比较差,因为每一次绘制还包含了裁剪工作。也许,
     91 我们可以先把待绘制的区域裁剪好,保存起来,这样每次绘制时就能轻松很多。
     92 drawImage 方法的第一个参数不仅可以接收 Image 对象,也可以接收另一个 Canvas 对象。
     93 而且,使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。
     94 我们只需要实现将对象绘制在一个未插入页面的 Canvas 中,然后每一帧使用这个 Canvas 来绘制
     95  */
     96 canvas.createImageData()//创建一个新的空白的ImageData对象。
     97 canvas.getImageData()//获取Canvas画布的设定区域的ImageData对象。
     98 canvas.putImageData()//给定的ImageData对象应用在Canvas画布上。
     99 
    100 Canvas状态
    101 Canvas状态管理几个方法。
    102 canvas.save()//存储当前Canvas的状态。
    103 canvas.restore()//恢复Canvas到前一次存储的状态。
    104 canvas.canvas//反向识别当前上下文源自哪个HTMLCanvasElement。
    105 
    106 其他方法
    107 其他一些不常用的API方法。
    108 canvas.drawFocusIfNeeded()//如果给定元素被聚焦,则该方法在当前路径周围绘制焦点环。
    109 canvas.scrollPathIntoView()//将当前路径或给定路径滚动到视图中。
    110 
    111 
    112 
    113 CanvasGradient
    114 方法
    115 addColorStop()//给渐变增加新的渐变点
    116 
    117  
    118 ImageBitmap
    119 属性
    120 height//只读。是无符号长整数,表示ImageBitmap对象的CSS像素高度
    121 width//只读。是无符号长整数,表示ImageBitmap对象的CSS像素宽度
    122 方法
    123 close()//处置所有与ImageBitmap关联的图形资源
    124  
    125 ImageData
    126 属性
    127 data//只读。是一个包含RGBA像素信息的Uint8ClampedArray,数组中所有的值都是整数,范围是0~255
    128 height//只读。是无符号长整数,表示ImageData对应的实际像素高度
    129 width//只读。是无符号长整数,表示ImageData对应的实际像素宽度
    130 
    131 
    132 TextMetrics
    133 属性
    134 width//只读。表示当前文本占据的CSS像素宽度
    135  
    136 CanvasImageSource
    137 无暴露属性,无继承方法。
    138 
    139 CanvasPattern
    140 无暴露属性,无继承方法。
    141  
    142 RenderingContext
    143 无暴露属性,无继承方法。
  • 相关阅读:
    洛谷p1017 进制转换(2000noip提高组)
    Personal Training of RDC
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Eurasia
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Peterhof.
    Asia Hong Kong Regional Contest 2019
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Siberia
    XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix.
    XVIII Open Cup named after E.V. Pankratiev. GP of SPb
    卜题仓库
    2014 ACM-ICPC Vietnam National First Round
  • 原文地址:https://www.cnblogs.com/weihexinCode/p/12317077.html
Copyright © 2011-2022 走看看