HTML canvas(画布)createPattern()方法

• 

  createPattern()方法定义和用法

  createPattern()方法的作用是:在指定的方向上重复指定的元素。
  元素可以是图像、视频或其他<canvas>元素。 重复元素可用于绘制/填充矩形、圆、线等。

• 

  createPattern()方法浏览器支持

  Internet Explorer	Chrome	FireFox	Safari	Opera
  9.0（含）以上	支持	支持	支持	支持

• 

  createPattern()方法语法

  context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

• 

  createPattern()方法实例

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=document.getElementById("lamp");
  var pat=ctx.createPattern(img,"repeat");
  ctx.rect(0,0,150,100);
  ctx.fillStyle=pat;
  ctx.fill();
  

  尝试一下
• 

  createPattern()方法参数值

  类型	描述
  image	指定要使用的模式的图像、画布或视频元素
  repeat	默认值。图案在水平和垂直方向上重复
  repeat-x	图案只是水平重复
  repeat-y	图案只是垂直重复
  no-repeat	模式将只显示一次(没有重复)

• 

  createPattern()方法相关页面

  HTML教程：HTML脚本

  HTML教程：HTML画布