/**
* canvas插入图片
* 等图片加载完,在执行canvas操作
* 图片预加载:在onload 中调用方法
* drawImage(oImg,x,y,w,h)
* oImg:图片x,y坐标
* w,h宽高
*
* 设置背景
* createPattern(oImg,平铺方式)
* repeat,repeat-x,repeat-y,no-repeat
*
* 渐变
* createLinearGradient(x1,y1,x2,y2)
* createRadialGradient(x1,y1,r1,x2,y2,r2)
* 第一个圆的坐标及半径
*
* canvas填充文本
* strokeText(文字,x,y) 文字边框的填充
* fillText(文字,x,y)
* font
* textAlign
* textBaseline
* measureText()
* measureText(str).width;只有宽度没有高度
* 阴影
* shadowOffsetX shadowOffsetY
* shadowBlur 高斯模糊值
* shadowColor 阴影颜色
*/
var oc = document.getElementById("canvas");
var ogc = oc.getContext('2d');
//插入图片
var yImg = new Image();
yImg.onload = function(){
draw(this);
}
yImg.src = 'wennuan.jpg';
function draw(obj){
ogc.drawImage(obj,100,0);
}
//颜色渐变
var obj = ogc.createLinearGradient(150,100,150,200);
obj.addColorStop(0,'red');
obj.addColorStop(1,'blue');
ogc.fillStyle = obj;
ogc.fillRect(150,100,100,100);
//径向渐变
var obj = ogc.createRadialGradient(200,200,100,200,100,150);
addColorStop(0,'red');
addColorStop(0.5,'yellow');
addColorStop(1,'blue');
ogc.fillStyle(obj);
ogc.fillRect(0,0,oc.width,oc.height);
//文字填充
ogc.font = '30px fontFamilu';//第二个参数必填
ogc.textBaseLine = 'top'; //top middle bottom
var w = ogc.measureText('文字');
ogc.fillText("文字",(oc.width-w)/2,(oc.height-60)/2); //文字居中水平垂直
ogc.strokeText('文字',0-,200);
canvas 三 图片插入及文字填充
最新推荐文章于 2024-07-31 09:36:45 发布