canvas 三 图片插入及文字填充

 /**  * 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插入图片  * 等图片加载完，在执行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);
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！