###1.使用图片(需要image对象)
drawImage(image,x,y,width,height)
其中image是image或者canvas对象,x和y 是其在目标canvas的起始坐标
width和height指控制该image或canvas对象画入画布的大小
eg:
var img = new Image();
img.src = "xxx.png";
img.onload = function(){ draw(); //建议该函数内部的代码抽取为外部函数调用 };
function draw(){
ctx.drawImage(img,100,100,150,150);
}
###2.设置背景(需要image对象)
createPattern(image,repetition)
image: 图像源
repetition: 指定如何重复图像。
"repeat" "repeate-x/y" "no-repeat"
eg:
var img = new Image();
img.src = "xxx.png";
img.onload = function(){
var pattern = ctx.createPattern(img,"repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0,0,400,400);
}
###3.渐变
3.1) 线性渐变 createLinearGradient(x1,y1,x2,y2) 该方法返回一个对象,该对象含有一个addColorStop(position, color)方法
position: 参数必须是一个0.0与1.0之间的数值,表示渐变中的颜色所在的相对位置
例如0.5表示颜色会在正中间开始渐变
eg: gradient.addColorStop(0,"red"); gradient.addColorStop(0.5,"yellow") gradient.addColorStop(1,"green")
红-----黄-----绿 依次渐变
color 参数为一个有效的css颜色值
参数为渐变的起点(x1,y1)与终点(x2,y2)
eg: var gradient = ctx.createLinearGradient(0,0,150,150);
gradient.addColorStop(0.5, #eee)
3.2) 径向渐变 createRadialGradient(x1,y1,r1,x2,y2,r2)
三个参数定义一个以(x1/2,y1/2)为圆点半径为r1/2的圆
###4. 使用文本
fillText(text , x,y) 指定的x,y位置填充指定文本
strokeText(text,x,y) 在指定的x,y位置绘制文本边框
4.1)文本样式
font = value 与css font属性相同的语法 只支持一种字体 sans-serif eg: ctx.font = “20px sans-serif” 必须有大小和字体
textAlign = value 文本对齐选项 left 、right 、center
textBaseline = value 指定当前文本基线 top、middle中间()、bottom
.....等