发表于 | 分类于 | 阅读次数:

图形组合

  • cvs.globalCompositeOperation=type;
  • type的值:
    • 1.source-over 默认值 覆盖 在原来的图形上绘制新图 新图在上
    • 2.source-out 显示新图的非交集部分
    • 3.source-in 显示新图和图形的交集，颜色是新图的颜色
    • 4.source-atop 显示旧图和交集部分 交集是新图颜色
    • 5.destination-over 在原来图形的下面绘制新图 旧图在上
    • 6.destination-out 显示旧图的非交集部分
    • 7.destination-in 显示交集 颜色是旧图颜色
    • 8.destination-atop 显示新图和交集部分 交集是旧图颜色
    • 9.lighter:全部显示 交集部分是叠加颜色
    • 10.xor:显示新旧图的非交集部分
    • 11.copy 只显示新图
      阅读全文 »

发表于 | 分类于 | 阅读次数:
绘图
    1. cvs.drawImage(Image,x,y,w,h);
      • Image 就是可以放在DOM中的真实图片，可以动态创建，也可以获取页面上的
      • x,y 图片放入画布,在画布左上角的坐标
      • w,h 绘制图片的宽高
        阅读全文 »

发表于 | 分类于 | 阅读次数:
  • 1.线性渐变
  • var CLG=cvs.createLinearGradient(x0,y0,x1,y1);
    • x0:渐变开始的x坐标
    • y0:渐变开始的y坐标
    • x1:渐变结束的x坐标
    • y1:渐变结束的y坐标
  • CLG.addColorStop(n,m);